@import '../../globals/vars';
@import '../../globals/typography';

$side-panel-width: 320px;
$side-panel-drawer-width: $spacing-09;
$border-width: 1px;

.#{$iot-prefix}--side-panel {
  position: relative;
  background-color: $ui-background;
  width: fit-content;
  overflow-x: hidden;
  display: inline-block;
  min-width: $side-panel-width;
  transition: min-width $duration--moderate-02, width $duration--moderate-02,
    left $duration--moderate-02, right $duration--moderate-02;
  transition-timing-function: carbon--motion(standard);

  &.#{$iot-prefix}--side-panel__right {
    right: 0;
  }

  .panel {
    height: 100%;

    .panel-content-wrapper {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .panel-content {
      padding-bottom: $spacing-09;
    }
  }

  .close-button {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
  }
}

.#{$iot-prefix}--side-panel-title {
  padding: $spacing-05;
  color: $text-01;
  @include type-style('productive-heading-03');

  &.#{$iot-prefix}--side-panel-title__condensed {
    @include type-style('productive-heading-02');
  }

  &.#{$iot-prefix}--side-panel-title__with-close {
    padding-right: $spacing-03;
    margin-right: $spacing-09;
  }
}

.#{$iot-prefix}--side-panel-footer {
  min-width: 15.4rem;
  display: flex;
  width: 100%;

  & > * {
    flex-grow: 1;
  }

  & > button.bx--btn {
    padding-right: 60px;
  }

  :not(:last-child) {
    margin-right: 1px;
  }
}

.#{$iot-prefix}--side-panel__drawer {
  width: $side-panel-drawer-width;
  min-width: $side-panel-drawer-width;

  .panel {
    &.#{$iot-prefix}--side-panel__left .panel-content-wrapper {
      right: $side-panel-width;
      height: 100%;
      position: relative;
    }
    &.#{$iot-prefix}--side-panel__right .panel-content-wrapper {
      left: $side-panel-drawer-width;
      height: 100%;
      position: relative;
    }
  }
}

.#{$iot-prefix}--side-panel__inline {
  .panel {
    &.#{$iot-prefix}--side-panel__left {
      border-right: $border-width solid $ui-03;
    }

    &.#{$iot-prefix}--side-panel__right {
      border-left: $border-width solid $ui-03;
    }
  }
}

.#{$iot-prefix}--side-panel__slide-in.active .panel.#{$iot-prefix}--side-panel__left {
  border-right: $border-width solid $ui-03;
}

.#{$iot-prefix}--side-panel__slide-in.active .panel.#{$iot-prefix}--side-panel__right {
  border-left: $border-width solid $ui-03;
}

.#{$iot-prefix}--side-panel__slide-in,
.#{$iot-prefix}--side-panel__slide-over {
  min-width: 0;
  width: 0;

  &.active {
    width: $side-panel-width;
    min-width: $side-panel-width;

    .panel {
      &.#{$iot-prefix}--side-panel__left {
        left: 0;
      }

      &.#{$iot-prefix}--side-panel__right {
        right: 0;
      }
    }
  }

  .panel {
    width: $side-panel-width;
    height: 100%;
    position: relative;
    transition: width carbon--motion(standard), left carbon--motion(standard),
      right carbon--motion(standard);

    &.#{$iot-prefix}--side-panel__left {
      left: -$side-panel-width;
    }
    &.#{$iot-prefix}--side-panel__right {
      right: -$side-panel-width;
    }
  }
}

.#{$iot-prefix}--side-panel__slide-over {
  position: absolute;
  z-index: 1;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}