@use './overlay';

$animation-duration: 0.3s;
$drawer-size: 320px;
$drawer-max-size: calc(100% - 48px);

@mixin ods-drawer() {
  display: block;
  position: fixed;
  inset-block: auto;
  inset-inline: auto;
  z-index: overlay.$ods-overlay-drawer-z-index;
  margin: 0;
  outline: none;
  border: none;
  box-shadow: 0 2px 8px 0 rgba(0, 14, 156, .2);
  background: var(--ods-color-neutral-000);
  padding: 16px;
  width: auto;
  overflow: auto;
}

@mixin ods-drawer-position($position) {
  @if $position == 'bottom' {
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: $drawer-size;
    max-height: $drawer-max-size;
    animation: drawer-open-bottom $animation-duration ease-in-out;

    @keyframes drawer-open-bottom {
      from {
       transform: translateY(100%);
      }

      to {
       transform: translateY(0);
      }
    }

    @keyframes drawer-close-bottom {
      from {
       transform: translateY(0);
      }

      to {
       transform: translateY(100%);
      }
    }
  } @else if $position == 'left' {
    top: 0;
    bottom: 0;
    left: 0;
    width: $drawer-size;
    max-width: $drawer-max-size;
    height: 100%;
    animation: drawer-open-left $animation-duration ease-in-out;

    @keyframes drawer-open-left {
      from {
       transform: translateX(-100%);
      }

      to {
       transform: translateX(0);
      }
    }

    @keyframes drawer-close-left {
      from {
       transform: translateX(0);
      }

      to {
       transform: translateX(-100%);
      }
    }
  } @else if $position == 'right' {
    top: 0;
    right: 0;
    bottom: 0;
    width: $drawer-size;
    max-width: $drawer-max-size;
    height: 100%;
    animation: drawer-open-right $animation-duration ease-in-out;

    @keyframes drawer-open-right {
      from {
       transform: translateX(100%);
      }

      to {
       transform: translateX(0);
      }
    }

    @keyframes drawer-close-right {
      from {
       transform: translateX(0);
      }

      to {
       transform: translateX(100%);
      }
    }
  } @else if $position == 'top' {
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: $drawer-size;
    max-height: $drawer-max-size;
    animation: drawer-open-top $animation-duration ease-in-out;

    @keyframes drawer-open-top {
      from {
       transform: translateY(-100%);
      }

      to {
       transform: translateY(0);
      }
    }

    @keyframes drawer-close-top {
      from {
       transform: translateY(0);
      }

      to {
       transform: translateY(-100%);
      }
    }
  }
}