@use '@xui/theme-core' as core;

@mixin theme() {
  .x-tab {
    display: contents;
  }

  .x-tab-group {
    flex: 100%;
    display: flex;
    flex-direction: column;

    &-list {
      display: flex;
      gap: 24px;
      margin: 15px;
    }

    &-active {
      color: var(--color-primary-default);
      border-bottom: 2px solid var(--color-primary-default);
      padding-bottom: 4px;
      opacity: 1;
    }

    &-entry {
      user-select: none;
      cursor: pointer;
      font-weight: 500;
      opacity: 0.8;

      &:hover {
        opacity: 1;
      }

      &[disabled] {
        color: core.text-muted();
        cursor: not-allowed;
        opacity: 1;

        &:hover {
          color: core.text-muted() !important;
          opacity: 1;
        }
      }
    }
  }
}