/*---------------------------------------------------------------------------------------------
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
@use "./tabs";

@forward "../style/index";
@forward "./tabs";

@mixin uicore-tabs-vertical {
  @include tabs.uicore-tabs;

  > li {
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;

    > a {
      line-height: var(--iui-size-l);
      padding: 14px 20px;
      border-width: 0;

      $bar-size: 2px;

      .uicore-tabs-inline-label {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
      }

      &::after {
        height: 100%;
        width: $bar-size;
        left: $bar-size;
        padding-top: $bar-size;
        padding-bottom: $bar-size;
        background-clip: content-box;
        box-sizing: border-box;
      }

      &:focus-visible {
        outline: 1px solid var(--iui-color-border-accent);
        outline-offset: -1px;
      }
    }

    &.core-active a {
      color: var(--iui-color-text-accent);
      background-color: var(--iui-color-background-accent-muted);
    }
  }
}