@import '~@palmetto/palmetto-design-tokens/build/scss/variables-size';

// This line prevents @reach/dialog from throwing a warning due to not importing their CSS.
:root {
  --reach-dialog: 1;
}

.modal-close {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: var(--size-spacing-xs);
  color: var(--color-text-body-primary);
  line-height: var(--size-line-height-base);
  border-radius: var(--size-border-radius-sm);

  &:hover {
    color: var(--color-text-contrast);
  }

  // Show focus styles on keyboard focus.
  &:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 4px var(--color-brand-grey-200);
  }

  // Hide focus styles if they are not needed, for example,
  // when an element receives focus via the mouse.
  &:focus:not(:focus-visible) {
    outline: 0;
    box-shadow: none;
  }
}


[data-reach-dialog-overlay].modal {
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  align-items: flex-end;
  z-index: var(--size-z-index-overlay);
  background-color: rgba(0 0 0 / 60%);
  overflow: hidden;

  :global {
    animation: fadeIn 0.2s;
  }
}

.modal {
  .container {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;

    @media (min-width: $size-breakpoint-tablet) {
      display: grid;
      grid-template-rows: minmax(var(--size-spacing-2xl), 1fr) auto minmax(
          var(--size-spacing-2xl),
          1fr
        );
      grid-template-columns: var(--size-spacing-2xl) auto var(
          --size-spacing-2xl
        );
      align-content: center;
      align-items: center;
      overflow: hidden;
    }
  }

  [data-reach-dialog-content] {
    color: var(--color-text-body-primary);
    font-family: var(--asset-fonts-body);
    display: flex;
    position: absolute;
    bottom: 0;
    flex-direction: column;
    grid-row: 1;
    grid-column: 1;
    z-index: var(--size-z-index-modal);
    margin: 0;
    background-color: var(--color-background-primary);
    padding: 0;
    width: 100%;
    border-radius: var(--modal-border-radius, var(--size-border-radius-md))
      var(--modal-border-radius, var(--size-border-radius-md)) 0 0;

    :global {
      animation: slideInUp 0.3s;
    }

    @media (min-width: $size-breakpoint-tablet) {
      position: initial;
      grid-row: 2;
      grid-column: 2;
      margin: auto;
      outline: none;
      border-radius: var(--modal-border-radius, var(--size-border-radius-md));
      box-shadow: var(--modal-box-shadow, var(--size-box-shadow-md));
      width: 70vw;
      min-height: unset;
      max-height: calc(100vh - 80px);

      :global {
        animation: fadeInUp 0.2s ease-out;
      }
    }

    @media (min-width: $size-breakpoint-desktop) {
      width: 50vw;
    }
  }
}

:global([data-reach-dialog-overlay].fullscreen) {
  [data-reach-dialog-content] {
    position: fixed;
    top: env(safe-area-inset-top, 0);
    right: env(safe-area-inset-right, 0);
    bottom: env(safe-area-inset-bottom, 0);
    left: env(safe-area-inset-left, 0);
    border-radius: 0;
  }

  @media (min-width: $size-breakpoint-tablet) {
    display: grid;
    grid-template-rows: minmax(var(--size-spacing-2xl), 1fr) auto minmax(
        var(--size-spacing-2xl),
        1fr
      );
    grid-template-columns: var(--size-spacing-2xl) auto var(--size-spacing-2xl);
    align-items: center;
    overflow: hidden;

    // should no longer be fullscreen on tablet and larger
    [data-reach-dialog-content] {
      position: unset;
      grid-row: 2;
      grid-column: 2;
      margin: auto;
      outline: none;
      border-radius: var(--modal-border-radius, var(--size-border-radius-md));
      box-shadow: var(--modal-box-shadow, var(--size-box-shadow-md));
      width: 70vw;
      min-height: unset;
      max-height: calc(100vh - 80px);

      :global {
        animation: fadeInUp 0.2s ease-out;
      }

      @media (min-width: $size-breakpoint-desktop) {
        width: 50vw;
      }
    }
  }
}
