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

[data-reach-dialog-overlay].drawer {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--size-z-index-overlay);
  background: hsl(0deg 0% 0% / 33%);
  max-height: 100vh;
  overflow: visible;

  //for the hide-overlay-* classes, push the overlay to opposite edge so that underlying content is not covered
  &.hide-overlay-right {
    left: 100%;
    background-color: transparent;
  }

  &.hide-overlay-left {
    right: 100%;
    background-color: transparent;
  }

  &.hide-overlay-bottom {
    top: 100%;
    background-color: transparent;
  }

  &.hide-overlay-top {
    bottom: 100%;
    background-color: transparent;
  }

  :global {
    animation: fadeIn 0.2s;
  }
}

.drawer {
  [data-reach-dialog-content] {
    background-color: var(--color-background-primary);
    color: var(--color-text-body-primary);
    display: flex;
    flex-direction: column;
    padding: 0;
    position: absolute;
    box-shadow: var(--size-box-shadow-xl);
    z-index: var(--size-z-index-drawer);

    &.left {
      left: 0;
      width: var(--w, 80vw);
      height: 100%;

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

    &.right {
      right: 0;
      width: var(--w, 80vw);
      height: 100%;

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

    &.bottom {
      bottom: 0;
      width: 100%;
      max-height: 100vh;

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

    &.top {
      top: 0;
      width: 100%;
      max-height: 100vh;

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

    @media (min-width: $size-breakpoint-tablet) {
      &.right,
      &.left {
        width: var(--w, var(--size-width-4xl));
      }
    }
  }
}

.drawer-header {
  border-color: var(--color-border-separator);
}

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

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

  //Show focus styles on keyboard focus.
  &:focus-visible {
    outline: 0;
    box-shadow: var(
      --drawer-close-button-box-shadow-focus,
      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;
  }
}
