@layer components {
  .tabs {
    .tabs__list {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: var(--space-2);
      margin: 0;
      padding: var(--space-2);
      background: var(--color-white);
      border: 1px solid var(--color-gray-300);
      border-radius: var(--radius-lg);

      .tabs__item {
        margin: 0;
        list-style-type: none;
      }
      .tabs__link {
        display: inline-flex;
        gap: var(--space-1);
        font-size: var(--text-base);
        font-weight: var(--font-semibold);
        color: var(--color-gray-700);
        text-decoration: none;
        padding: var(--space-2) var(--space-3);
        border: 1px solid transparent;
        border-radius: var(--radius-md);
        transition: all var(--transition-slow);
        cursor: pointer;
        background: none;

        &:hover {
          box-shadow: var(--shadow-sm);
          background: var(--color-gray-100);
          color: var(--color-gray-900);
          border-color: var(--color-gray-300);
        }

        &.is-active {
          box-shadow: var(--shadow-sm);
          background: var(--color-primary-50);
          color: var(--color-primary-700);
          border-color: var(--color-primary-300);
        }
      }
    }

    .tabs__panels {
      margin-top: var(--space-6);

      [hidden] {
        display: none;
      }
    }

    &.tabs--secondary {
      .tabs__list {
        background: none;
        padding: 0;
        border: none;
        border-radius: 0px;
        border-bottom: 1px solid var(--color-border);
        margin-bottom: var(--space-6);
        gap: 0px;

        .tab__link {
          text-decoration: none;
          color: var(--color-gray-700);
          padding: var(--space-2) var(--space-4);
          border-bottom: 2px solid transparent;
          background: transparent;
          border-radius: var(--radius-md) var(--radius-md) 0 0;
          transition: var(--transition-slow);
          &:hover {
            border-color: var(--color-gray-600);
          }
          &.is-active {
            background: var(--color-primary-50);
            border-color: var(--color-primary-600);
            color: var(--color-primary-600);
          }
        }
      }
    }
  }

  [data-theme="dark"] {
    .tabs {
      .tabs__list {
        background: var(--color-hover);

        .tabs__link {
          &:hover {
            background: var(--color-surface);
            color: var(--color-white);
          }

          &.is-active {
            background: var(--color-surface);
            color: var(--color-primary-300);
            border-color: var(--color-primary-300);
          }
        }
      }

      &.tabs--secondary {
        .tabs__list {

          .tab__link {
            text-decoration: none;
            color: var(--color-gray-700);
            padding: var(--space-2) var(--space-4);
            border-bottom: 2px solid transparent;
            background: transparent;
            border-radius: var(--radius-md) var(--radius-md) 0 0;
            transition: var(--transition-slow);
            &:hover {
              border-color: var(--color-gray-600);
            }
            &.is-active {
              background: var(--color-hover);
              border-color: var(--color-primary-300);
              color: var(--color-primary-300);
            }
          }
        }
      }
    }
  }
}