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

.dsa41.sheet {

  // Tabs v2

  .sheet-tabs {

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

    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;
        background: assets.$tab-background;
        position: relative;

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


        &::after {
          position: absolute;
          content: '';
          left: 0;
          right: 0;
          bottom: -1px;
          height: 3px;
          background: assets.$tab-background;
          z-index: 5;

        }

      }

    }
  }

  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;
    }
  }

  nav.tabs:not(.sheet-tabs) {
    border: unset;
    border-bottom: 1px solid black;
    gap: 0;
    height: 24px;

    a.item {
      flex: 1;
      position: relative;
      height: 24px;
      line-height: 24px;

      span {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        line-height: 24px;
        vertical-align: middle;
        text-align: center;
      }
    }

    a.item:not(.active) {
      border: unset;
    }

    a.item.active {
      border: 1px solid black;
      border-bottom: none;

      span {
        left: -2px;
        top: -2px;
        height: 28px;

        &:after {
          content: '';
          position: absolute;
          left: 2px;
          right: 0;
          bottom: 3px;
          height: 2px;
          background: assets.$tab-background;
        }
      }
    }

  }

}

// darkmode

.theme-dark {

  .dsa41.sheet {

    .sheet-tabs {

      a[data-action="tab"].active {
        background: rgba(0, 0, 0, 0.3);

        &::after {
          background: rgba(0, 0, 0, 0.75);
          bottom: 0;
          height: 1px;
        }
      }

    }

    section.tab {
      background: rgba(0, 0, 0, 0.3);
    }

  }

}