@import "variables";

.tbx-panel
{
  background-color : $panel-bg-color;
  background-clip  : border-box;
  min-width        : $panel-min-width;
  border-radius    : $panel-border-radius;
  border           : $panel-border-width solid $panel-border-color;
  border-top-width : $panel-border-top-width;
  margin-top       : $panel-margin-top;
  margin-bottom    : $panel-margin-bottom;
  position         : relative;
  display          : flex;
  flex-direction   : column;

  .tbx-panel-header
  {
    background-color : $panel-header-bg;
    color            : $panel-text-color;
    padding          : $panel-header-padding;
    margin-bottom    : $panel-header-margin-bottom;
    border-bottom    : $panel-header-border-bottom solid $gray-300;
    display          : flex;
    align-items      : center;
    justify-content  : space-between;

    .tbx-panel-header-title
    {
      font-size : $panel-header-title-font-size;
      margin    : $panel-header-title-margin;
    }

    // .tbx-panel-header-left
    // {
    //   /*font-size: 1.1rem;
    //   font-weight: 400;
    //   margin: 0 0 0 10px;*/
    // }

    // .tbx-panel-header-center
    // {
    // }

    .tbx-panel-header-right
    {
      list-style : none;
      padding    : 0;
      margin     : 0;
      color      : $panel-header-right-color;

      .tbx-panel-action-link
      {
        color            : $panel-action-link-color;
        text-align       : center;
        text-decoration  : none;
        padding          : 6px 10px;
        background-color : $panel-action-link-bg;
        border           : 1px solid $panel-action-link-border;
      }

      .tbx-panel-action-link:not(:last-child)
      {
        margin-right : -4px;
      }

      .tbx-panel-action-link:hover,
      .tbx-panel-action-link:active,
      .tbx-panel-action-link:focus
      {
        background-color : $gray-300;
        border           : 1px solid $panel-action-link-border;
        outline          : $panel-action-button-outline;
      }

      .tbx-panel-action-button
      {
        color            : $panel-action-button-color;
        padding          : 6px 10px;
        background-color : $panel-action-button-bg;
        border           : 1px solid $panel-action-button-border;
      }

      .tbx-panel-action-button:not(:last-child)
      {
        margin-right : -4px;
      }

      .tbx-panel-action-button:hover,
      .tbx-panel-action-button:active,
      .tbx-panel-action-button:focus
      {
        background-color : $panel-action-button-bg-hover;
        border           : 1px solid $panel-action-button-border;
        outline          : $panel-action-button-outline;
      }
    }
  }

  .tbx-panel-body
  {
    padding    : $panel-body-padding;
    min-height : $panel-body-min-height;
  }

  .tbx-panel-footer
  {
    background-color : $panel-footer-bg-color;
    padding          : $panel-footer-padding;
    margin           : $panel-footer-margin;
    border-top       : $panel-footer-border-top;
    display          : flex;
    align-items      : flex-end;
    justify-content  : flex-end;

    .tbx-panel-footer-left
    {
      font-size   : $panel-footer-left-font-size;
      font-weight : $panel-footer-left-font-weight;
      /*margin: 0 0 0 10px;*/
    }

    // .tbx-panel-footer-center
    // {
    // }

    // .tbx-panel-footer-right
    // {
    // }
  }

  .tbx-panel-no-padding
  {
    padding : 0;
  }
}