/**
 * Styling for the installation page, including overriding some default styling of
 * sphinx-design. This style sheet should be included only for the install page.
 *
 * This file is compiled into styles/install.css by sphinxcontrib.sass, see:
 * https://sass-lang.com/guide/
 */

.install-instructions .sd-tab-set {
  .sd-tab-content {
    padding: 0.5rem 0 0 0; // Vertical gap between the two sets of nested tabs
    background-color: transparent;
    border: none;

    p:first-child {
      margin-top: 1rem !important;
    }
  }

  > label.sd-tab-label {
    margin: 0 3px; // Horizontal gap within the same set of tabs
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px !important;

    &.tab-6 {
      width: calc((100% - var(--tab-caption-width, 0%)) / 2 - 6px) !important;
    }

    &.tab-4 {
      width: calc((100% - var(--tab-caption-width, 0%)) / 3 - 6px) !important;
    }
  }

  > input:checked + label.sd-tab-label {
    transform: unset;
    border: 2px solid var(--pst-color-primary);
  }

  // Show tab captions on large screens
  @media screen and (min-width: 960px) {
    --tab-caption-width: 20%;

    &::before {
      width: var(--tab-caption-width);
      display: flex;
      align-items: center;
      font-weight: bold;
    }

    &.tabs-os::before {
      content: "Operating System";
    }

    &.tabs-package-manager::before {
      content: "Package Manager";
    }
  }
}
