/**
 * AppBuckets UI
 *
 * _Panel @ src/styles/elements/_panel.scss
 *
 * Defined at 24 giu 2020
 * Copyright Marco Cavanna • 2020
 *
 * ---
 * Panels are element used to display organized content
 *
 */

/******
    Base Panel Style
******/
.panel {
  font-size: 1rem;
  display: block;
  background-color: transparent;
  margin-bottom: $panel-bottom-spacer;

  // ----
  //  Set Header Style
  // ----
  > .head {
    font-size: 1em;

    /// Reset Header Font Size and Margins
    > .header {
      font-size: $h4-font-size;
      margin: 0;

      > .header-content {
        font-size: 1.25em;
      }

      > .header-icon {
        font-size: 1.5em;
      }
    }

    /// If panel body exists, apply margin
    + .body,
    + .foot {
      margin-top: $panel-vertical-padding;
    }
  }

  // ----
  //  Panel Body Style
  // ----
  > .body {
    position: relative;
    background-color: $panel-background-color;
    border-radius: $panel-border-radius;
    padding: $panel-vertical-padding $panel-horizontal-padding;

    /// If panel foot exists, apply margin
    + .foot {
      margin-top: $panel-vertical-padding;
    }
  }

  // ----
  //  Panel Footer
  // ----
  > .foot {
    padding: 0 $panel-horizontal-padding;
    opacity: .75;
  }
}


/******
    Solid Panel
******/
.panel.solid {
  // ----
  //  Set the Head Style and Remove Spacer between Body
  // ----
  > .head {
    background-color: $panel-background-color;
    border-top-left-radius: $panel-border-radius;
    border-top-right-radius: $panel-border-radius;
    padding: $panel-vertical-padding $panel-horizontal-padding $panel-vertical-padding * .75;

    + .body {
      padding-top: 0;
      margin-top: 0;
    }
  }

  // ----
  //  Remove Top Border Radius from Body
  // ----
  > .body {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}


/******
    Table Container Panel
******/
.table-container.panel {
  > .body {
    padding: 0;
  }
}


/******
    Loading Panel will append a Loader in front of Panel
******/
.panel.loading {
  position: relative;

  > .loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
  }
}


/******
    Disabled Panel Header has lower opacity
******/
.panel.disabled {
  opacity: $disabled-element-opacity !important;
  pointer-events: none;
  cursor: default;
  @include unselectable
}


/******
    FAB Buttons
******/
.panel > .body.with-fab {
  margin-bottom: $panel-fab-size + $panel-bottom-spacer;
  padding-bottom: $panel-vertical-padding + ($panel-fab-size * .75);

  // ----
  //  Place Fabs Buttons
  // ----
  > .fabs {
    position: absolute;
    bottom: 0;
    right: $panel-horizontal-padding;
    transform: translateY(50%);
    display: flex;
    flex-direction: row-reverse;

    > .fab {
      font-size: $panel-fab-size !important;
      margin: 0;

      + .fab {
        margin-right: $button-fab-spacer;
      }
    }
  }

  // ----
  //  Increase spacing with footer
  // ----
  + .foot {
    margin-top: $panel-vertical-padding + ($panel-fab-size * .75);
  }
}


/******
    Panel Appearance
******/
.panel {

  &.solid > .body {
    box-shadow: none !important;
  }

  @each $label, $color in $ui-color-map {
    &.is-#{$label} {
      $shadow: inset 0 $panel-appearance-border-consistence 0 (-$panel-appearance-border-consistence + $panel-appearance-border-width) $color;

      > .body {
        box-shadow: $shadow;
      }

      &.solid > .head {
        box-shadow: $shadow;
      }
    }
  }
}