@use "../atoms/numbers";
@use "../atoms/colours";
@use "../atoms/assets";

.dsa41.sheet {

  nav.sheet-tabs.tabs {

    position: relative;
    display: flow;
    border-top: unset;
    border-bottom: unset;
    margin-bottom: 0;

    a.item[data-tab] {

      background-color: colours.$tab-inactive-background-color;

      &.active {
        border-left: numbers.$tab-border-width solid colours.$tab-border-color;
        border-top: numbers.$tab-border-width solid colours.$tab-border-color;
        border-right: numbers.$tab-border-width solid colours.$tab-border-color;
        border-bottom: 0;
        top: numbers.$tab-border-width*2*2;
        background: assets.$tab-background;
        position: relative;
        z-index: 2;
      }

    }

  }

  section.sheet-body {

    border: numbers.$tab-border-width solid colours.$tab-border-color;
    background: assets.$tab-pane-background;

    div.tab {

      overflow: auto;

    }

  }


  // Tabs v2

  .sheet-tabs {

    position: relative;
    display: flow;
    border-top: unset;
    border-bottom: unset;
    margin-bottom: 0;

    a[data-action="tab"] {

      background-color: colours.$tab-inactive-background-color;
      display: inline-block;
      height: 32px;
      line-height: 32px;
      vertical-align: middle;
      padding: 0 16px;

      span {

      }

      &.active {

        border-left: numbers.$tab-border-width solid colours.$tab-border-color;
        border-top: numbers.$tab-border-width solid colours.$tab-border-color;
        border-right: numbers.$tab-border-width solid colours.$tab-border-color;
        border-bottom: 0;
        top: numbers.$tab-border-width*2;
        background: assets.$tab-background;
        position: relative;
        z-index: 2;

        box-shadow: numbers.$tab-shadow-right numbers.$tab-shadow-bottom numbers.$tab-shadow-blur-radius colours.$tab-shadow;

        span {

        }

      }

    }
  }

  section.tab {
    border: numbers.$tab-border-width solid colours.$tab-border-color;
    background: assets.$tab-pane-background;
    box-shadow: numbers.$tab-pane-shadow-right numbers.$tab-pane-shadow-bottom numbers.$tab-pane-shadow-blur-radius colours.$tab-pane-shadow;

    flex: 1;

    & > div {
      display: flex;
      flex-direction: column;
      height: 100%;
      gap: 8px;
      padding: 8px;
    }
  }

}