@use '../../../styles/Mixins/' as *;

.app-tabs {
  display: grid;
  grid-template-columns: min-content auto;
  column-gap: 1rem;
  // height: 100%;
  height: $app-content-height;
}

.app-tabs-list {
  display: grid;
  row-gap: 0.3rem;
  grid-auto-rows: min-content;
  color: var(--tab-list-text-inactive);

  button {
    font-size: 0.85rem;
    padding: 0.5rem;

    &:hover {
      background-color: var(--tab-hover-color);
      border-radius: 0.3rem;
    }

    svg {
      width: 26px;
      height: 26px;
    }

    &[aria-selected='true'] {
      background-color: var(--tab-list-bg);
      color: var(--tab-list-text);
      font-weight: bold;
      border-radius: 0.3rem;
      border: none;
    }
  }
}

.app-tabs-panels {
  .app-tabs-panel {
    padding: 0;
    height: 100%;
  }
}