$panel-padding: 20px;
$st-panel-borderradius: 4px;

.Panel {
  $this: &;
  position: relative;
  background: $color-white;
  box-shadow: $shadow-near;
  border-radius: $st-panel-borderradius;
  margin-bottom: 20px;

  *,
  *:before,
  *:after {
    box-sizing: border-box;
  }
  &--full-width {
    width: 100%;
  }
  &--blue {
    background: $color-indigo-lighter;
    color: $color-indigo-text;

    #{$this}__title {
      color: $color-indigo-text;
    }

    #{$this}__title--header-border {
      border-bottom-color: $color-indigo-light;
    }
  }
  &--dark {
    background: $color-gray-30;
    color: $color-white;
    box-shadow: $dark-panel-shadow-near;

    #{$this}__title {
      color: $color-white;
    }

    #{$this}__title--header-border {
      border-color: $color-gray-20;
    }
  }
  &--double {
    width: 100%;
    max-width: 406px;
    background-color: $color-white;
    border: none;
    border-radius: 8px;
    box-shadow: $shadow-far;
    z-index: 2;
    position: relative;
    min-height: 386px;
    display: flex;
    align-items: center;

    #{$this}__body {
      padding: 24px 22px;
      width: 100%;

      &--no-padding {
        padding: 0;
      }
    }
    #{$this}--success {
      background: $color-white;

      #{$this}__body {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }
    }
  }
  &--double#{$this}--dark {
    background: $color-gray-30;

    #{$this}__title {
      color: $color-white;
    }

    #{$this}__title--header-border {
      border-color: $color-gray-20;
    }
  }
  &--padded {
    margin: 10px;
  }
  &--success {
    background: $color-green-lighter;
    color: $color-green-text;

    #{$this}__title {
      color: $color-green-text;
    }

    #{$this}__title--header-border {
      border-bottom-color: $color-green-light;
    }
  }
  &--warn {
    background: $color-red-lighter;
    color: $color-red-text;

    #{$this}__title {
      color: $color-red-text;
    }

    #{$this}__title--header-border {
      border-bottom-color: $color-red-light;
    }
  }
  &__double-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    max-width: 800px;
    margin: auto;

    @include bp($break-tablet) {
      max-width: 100%;
    }
    #{$this}:last-child {
      position: absolute;
      min-width: 406px;
      height: 386px;
      box-shadow: $shadow-near;
      z-index: 1;
      bottom: -48px;
      left: 53%;
      transform: translateX(-47%);

      #{$this}__body {
        height: 100%;
        position: relative;
      }
    }
  }
  &__title {
    @extend .Font__headline--10;
    @extend .Font__color--text;

    padding: 8px 18px;
    min-height: 52px;
    display: flex;
    align-items: center;

    &__well {
      @extend .Font__body;
      @extend .Font__body--10;

      background-color: $color-gray-140;
      padding: 16px 20px 12px;
      border-bottom: 1px solid $color-gray-130;
      color: $color-gray-50;
    }

    &--no-left-padding {
      padding-left: 0;
    }
    &--no-right-padding {
      padding-right: 0;
    }
    &--large {
      @extend .Font__headline--30;
      @extend .Font__color--text;

      padding-top: 9px;
      min-height: 56px;
    }
    &--small {
      font-size: 12px;
      font-weight: $weight-medium;
      line-height: 16px;
      text-transform: uppercase;
      letter-spacing: 1.4px;
      padding: 14px 18px 7px 18px;
    }
    &--small#{$this}__title--no-left-padding {
      padding-left: 0;
    }
    &--small#{$this}__title--no-right-padding {
      padding-right: 0;
    }
    &--header-border {
      border-bottom: 1px solid $color-gray-130;
    }
    &__icon {
      margin-right: 8px;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
    &--has-info-icon {
      display: flex;
      align-items: center;
    }
    &__info-icon {
      margin-left: 8px;
    }
    &__switch {
      display: inline-block;
      padding-left: 10px;
    }
  }

  &__body {
    padding: $panel-padding;
    position: relative;

    &--has-expandable-content {
      height: fit-content;
      overflow: hidden;
      transition: max-height 0.2s $motion-quint-easeinout;
    }

    &--no-padding {
      padding: 0;
      #{$this}__footer {
        border-bottom-left-radius: $st-panel-borderradius;
        border-bottom-right-radius: $st-panel-borderradius;
        border-bottom: 1px solid $color-gray-130;
      }
    }

    &--height-calculator {
      height: 100%;
    }

    #{$this}__padding {
      padding: $panel-padding;
    }

    // TO BE MOVED TO STELLAR TABLE WHEN IT IS BUILT IN HOLOKIT
    & > .stellar-table .header {
      border-top: none;
    }

    & > .stellar-table .body-data:last-child,
    & > .stellar-table .last-row {
      border-bottom: none;
    }
  }

  &__well {
    background: $color-gray-140;
    padding: 8px 18px;
    border-bottom-right-radius: $st-panel-borderradius;
    border-bottom-left-radius: $st-panel-borderradius;

    & + #{$this}__inline-alert {
      margin-top: 18px;
    }
  }

  &__loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: $color-white;
    opacity: 0;

    &--active {
      opacity: 1;
      z-index: 3;
    }
  }

  &__info {
    font-weight: 200;
    font-size: 18px;
    color: $color-gray-20;
    text-align: left;
    line-height: 23px;
    border-bottom: 1px solid $color-gray-130;
    padding: 13px 18px 13px 18px;
    background-color: $color-gray-140;
  }

  &__footer {
    padding: 20px;
    color: $color-gray-20;
    font-size: 18px;
    font-weight: 300;
    line-height: 23px;
    background: $color-gray-140;
    border-top: 1px solid $color-gray-130;
  }
}