@import '../utils/theme/variables.scss';
$border-color: $brc-silver !default;
$soft-loader-color: $brc-coolGrey !default;
$header-background: $brc-gradientGrey !default;
$header-background-dark: $brc-darkGreyBlue !default;
$header-color: $brc-darkGreyBlue !default;
$header-color-dark: $brc-white !default;
$expand-icon-color: $brc-coolGrey !default;
$expand-icon-color-hover: rgba($brc-coolGrey, 0.7) !default;
$content-background: $brc-white !default;
$content-color: $brc-darkGreyBlue !default;
$content-title-color: $brc-darkGreyBlue !default;

@keyframes loading {
  0% {
    right: 100%;
    left: 0;
  }

  50% {
    right: 0;
    left: 0;
  }

  100% {
    right: 0;
    left: 100%;
  }
}

.panel {
  position: relative;

  &.expanded,
  &.collapse-top,
  &.collapse-bottom {
    width: 100%;
  }

  .expand-icon {
    margin-right: 14px;
  }

  &.floating {
    margin: 10px;
    border: 1px solid $border-color;
  }

  &.collapsable {
    &.collapsed {
      width: 100%;

      &:hover {
        cursor: pointer;

        > .panel-header .panel-header-title-wrapper .expand-icon {
          color: $expand-icon-color-hover;
        }
      }
    }

    &.expanded {
      > .panel-header .panel-header-title-wrapper {
        cursor: pointer;

        &:hover .expand-icon {
          color: $expand-icon-color-hover;
          fill: $expand-icon-color-hover;
        }
      }
    }

    > .panel-header .panel-header-title-wrapper .expand-icon {
      color: $expand-icon-color;
      fill: $expand-icon-color;
      font-size: 20px;
    }
  }

  &.docked-top > .panel-content {
    border-bottom: 1px solid $border-color;
  }

  &.docked-left {
    border-right: 1px solid $border-color;
  }

  &.docked-bottom {
    border-top: 1px solid $border-color;
  }

  &.docked-right {
    border-left: 1px solid $border-color;
  }

  &.floating {
    &.collapsed {
      .panel-header {
        border-bottom: 0;
      }
    }
  }

  &.is-dark {
    > .panel-header {
      background: $header-background-dark;
      color: $header-color-dark;
    }
  }

  > .panel-header {
    padding: 15px 33px;
    border-bottom: 1px solid $border-color;
    background: $header-background;
    color: $header-color;

    .panel-header-title {
      font-size: 16px;
      font-weight: $brc-semibold;
    }

    .panel-menu {
      margin-right: -12px;
      padding: 7px 0;
    }
  }

  > .panel-content {
    padding: 25px 33px;
    background: $content-background;
    color: $content-color;

    .panel-content-title {
      margin: 0;
      color: $content-title-color;
      font-size: 17px;
    }
  }

  .panel-soft-loader {
    position: absolute;
    top: 0;
    z-index: 999;
    height: 1px;
    width: 100%;

    .loader {
      position: relative;
      height: 1px;
      width: 100%;
      background: rgba($soft-loader-color, 0.3);

      &::after {
        content: '';
        display: block;
        position: absolute;
        right: 100%;
        left: 0;
        height: 100%;
        background: $soft-loader-color;
        animation: loading 2s ease infinite;
      }
    }
  }

  &.collapsed.collapse-right,
  &.collapsed.collapse-left {
    .panel-content {
      cursor: pointer;
    }

    .panel-content-title {
      position: absolute;
      -moz-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      -o-transform: rotate(90deg);
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg);
      -moz-transform-origin: 0 0;
      -ms-transform-origin: 0 0;
      -o-transform-origin: 0 0;
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
      margin-top: 10px;
      margin-left: 27px;
      white-space: nowrap;
    }
  }
}
