@use '../xui';

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

  xui-tab-group {
    flex: 100%;
    display: flex;
    flex-direction: column;
  }

  .x-tabs-list {
    display: flex;
    gap: 24px;
    margin: 15px;
  }

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

  .x-tabs-entry {
    user-select: none;
    cursor: pointer;
    font-weight: 500;
    opacity: 0.8;

    &:hover {
      opacity: 1;
    }

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

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