/**
 *
 * @ai-apps/angular v2.152.0 | _side-panel.scss
 *
 * Copyright 2014, 2023 IBM
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0

 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */


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