@import "../base/variables";
@import "../base/mixins";
@import "../variables/panel";

/**
* Transition Mixin
*/
@mixin transition($name, $duration) {
  -webkit-transition: $name $duration;
  -moz-transition: $name $duration;
  -o-transition: $name $duration;
  transition: $name $duration;
}

/**
*  Panel Styles
*/
@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .panel-breakpoint#{$infix} {
      .overlay {
        &.animated {
          &.opened {
            opacity: 0;
          }
        }
      }

      &.panel {
        &.panel-size-sm {
          width: $panel;
        }

        &.panel-size-md {
          width: $panel-md;
        }

        &.panel-size-lg {
          width: $panel-lg;
        }

        &.panel-left {
          &:not(.opened) {
            box-shadow: 0 0 0 0;
            left: -100%;

            &.panel-size-lg {
              left: -100%;
            }
          }
        }

        &.panel-right {
          &:not(.opened) {
            box-shadow: 0 0 0 0;
            right: -100%;

            &.panel-size-lg {
              right: -100%;
            }
          }
        }
      }
    }
  }
}


//! This should be a mixin or a common CSS class that can be applied to all overlays
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: $panel-overlay-index;
  background: $overlay-background;
  backdrop-filter: blur(8px);
  opacity: 0;

  &.below-header {
    z-index: $panel-container-index;
  }

  @include transition(opacity, 0.3s);

  &.opened {
    opacity: 1;
  }

  &.animated {
    &.opened {
      opacity: 1;
    }
  }

  &.hide {
    left: 999999px;
  }
}

.panel {
  box-sizing: border-box;
  z-index: $panel-index;
  background-color: $white;
  overflow-y: auto;
  /* Desktop according to size */
  margin-top: 0;
  padding: 0;
  height:100%;
  //max-height: 100%;
  border: none;
  max-height: fit-content;
  width: $panel-mobile;

  @include media-breakpoint-down(md) {
    width: 100%;
    max-width: 100%;
  }

  &::backdrop {
    position: fixed;
    max-width: 100%;
    background: rgba(5, 17, 25, 0.815);
    backdrop-filter: blur(8px);
  }

  &.panel-close-button {
    //padding-top: 3rem;
  }

  &.below-header {
    border-top: 1px solid $border-color;
    top: $header-height-mb;

    &::backdrop {
      top: $header-height-mb;
    }

    &.opened {
      box-shadow: none !important;
    }

    @include media-breakpoint-up(xl) {
      top: $header-height;

      &::backdrop {
        top: $header-height;
      }
    }
    z-index: ($panel-container-index + 1);
    height: calc(100dvh - #{$header-height-mb});

    @include media-breakpoint-up(xl) {
      top: $header-height;
      height: calc(100dvh - #{$header-height});
    }
  }

  &.panel-left {
    /* Desktop according to size */
    margin-left: -$panel-mobile;

    @include transition(all, 0.3s);

    &.opened {
      margin-left: 0;
      box-shadow: 0 0 20px 0 rgba($black, 0.2);
    }
  }

  &.panel-right {
    /* Desktop according to size */
    margin-right: -$panel-mobile;

    &.panel-size-sm {
      @include media-breakpoint-up(lg) {
        margin-right: -$panel;
      }
    }

    &.panel-size-md {
      @include media-breakpoint-up(lg) {
        margin-right: -$panel-md;
      }
    }

    &.panel-size-lg {
      @include media-breakpoint-up(lg) {
        margin-right: -$panel-lg;
      }
    }

    @include transition(all, 0.3s);

    &.opened {
      margin-right: 0;
      box-shadow: 0 0 20px 0 rgba($black, 0.2);
    }
  }

  .panel-content {
    box-sizing: border-box;
    height: 100%;
    height: -webkit-fill-available;
    width: 100%;
    -webkit-overflow-scrolling: touch; // For iOS and momentum scrolling

    &:focus {
      outline: none;
    }
  }
}

.overlay.animated + .panel {
  /* Don't show box shadow on panels with overlay */
  box-shadow: 0 0 0 0;
}

.close {
  &--button  {
    position: sticky;
    right: .5rem;
    top: .5rem;
    z-index: 1;
    float: right;
    height: 1.5rem;
    width: 1.5rem;
    line-height: 1.5rem;
    padding:0;
    background-color: transparent;
    border:0;
    border-radius: 50%;
    cursor: pointer;
    color: $navy;
    font-size: 1.5rem;
    transition: all 0.15s;

    &:hover, &.scrolling:hover, &.scrolling:focus-visible {
      background-color: $smoke;
      color: $black;
    }

    &:focus-visible, &.scrolling,
    &.scrolling:focus:not(:focus-visible) {
      outline: $focus-border-width solid $navy;
    }

    &:focus-visible {
      background-color: $smoke;
    }

    &.scrolling {
      background-color: $white;
    }
  }
}

.header-panel {
  .panel {
    height: calc(100dvh - #{$header-height-mb});

    &.panel-close-button {
      padding-top: 0;
    }

    @include media-breakpoint-up(xl) {
      height: calc(100vh - #{$header-height});
    }

    &-content {
      //overflow-y: auto;
    }
  }

  .close {
    &--container {
      padding-top: 0;
    }

    &--button {
      position: fixed;
      top: 0;
      right: 0;
      background: white;
      display: flex;
        align-content: center;
      align-items: center;
      align-self: end;
      justify-content: center;
      font-size: 1.5rem;
      border: none;
      color: $black;

      width: $header-height-mb;
      line-height: $header-height-mb;
      height: $header-height-mb;
      border-radius: 0;

      som-icon {
        display: flex
      }

      @include media-breakpoint-up(xl) {
        width: $header-height;
        line-height: $header-height;
        height: $header-height;
      }

      @media (hover: hover) {
        &:hover {
          background: $smoke;
        }
      }

      &:focus {
        box-shadow: 0;
      }

      &:focus-visible {
        outline: none;
        background-color: $smoke;
        box-shadow: inset 0px 0px 0px 2px $primary;
        cursor: pointer;
      }

      :focus:not(:focus-visible) {
        outline: none;
        box-shadow: none;
      }


      .btn {
        font-size: 1.5rem!important;
        color: black!important;
        width: $header-height-mb;
        line-height: $header-height-mb;
        height: $header-height-mb;
        border-radius: 0!important;

        @include media-breakpoint-up(xl) {
          width: $header-height;
          line-height: $header-height;
          height: $header-height;
        }

        &:hover {
          //background-color: transparent!important;
        }

        &:focus {
          //background-color: transparent!important;
        }
      }
    }
  }
}