@use "../variables";

// begin "global" tabs styling

@mixin Tabs() {
  nav.tabs-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    align-self: stretch;
    background: variables.get-background-color("base", "default");
    border-radius: 12px 12px 0px 0px;
    border: 1px solid variables.get-border-color("subtle", "default");
    padding: 8px 12px;

    a {
      border-radius: 8px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;

      &.selected {
        background: variables.get-background-color("subtle", "default");
      }
    }
  }

  section.tabs-body {
    &,
    & article {
      display: flex;
      flex-grow: 1;
      align-self: stretch;
    }
  }
}