@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;
}

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

  // 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].media-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: rgb(0 0 0 / 80%);
  overflow: hidden;

  :global {
    animation: fadeIn 0.2s;
  }
}

.media-modal {
  .container {
    position: fixed;
    display: grid;
    width: 100%;
    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);
    grid-template-rows: minmax(var(--size-height-lg), 1fr) auto minmax(
        var(--size-height-lg),
        1fr
      );
    grid-template-columns: 1fr auto 1fr;
    overflow: hidden;
  }

  .header {
    position: fixed;
    top: env(safe-area-inset-top, 0);
    right: env(safe-area-inset-right, 0);
    left: env(safe-area-inset-left, 0);
    color: var(--media-modal-font-color, var(--color-brand-grey-100));
  }

  .header-bar {
    background: rgb(0 0 0 / 50%);
  }

  .title {
    overflow: hidden;
    display: block;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .footer {
    position: fixed;
    display: flex;
    width: 100%;
    left: env(safe-area-inset-left, 0);
    right: env(safe-area-inset-right, 0);
    bottom: env(safe-area-inset-bottom, 0);
    background: rgb(0 0 0 / 50%);
    color: var(--media-modal-font-color, var(--color-brand-grey-100));
    height: var(--size-height-lg);
    justify-content: center;
    align-items: center;
    padding: var(--size-spacing-md);
    align-self: flex-end;
    z-index: var(--size-z-index-modal);
  }

  [data-reach-dialog-content] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: transparent;
    grid-row: 2;
    grid-column: 2;
    z-index: var(--size-z-index-modal);
    outline: none;
    padding: 0;
    height: 100%;
    border-radius: 0;

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