.tabs {
  > :global(.ant-tabs-nav) {
    margin: 0;
    padding: 0 24px;
    background: var(--theme-card-color);
    border: 1px solid var(--theme-border-color);

    &::before {
      border: 0;
    }

    > :global(.ant-tabs-nav-wrap) {
      > :global(.ant-tabs-nav-list) {
        > :global(.ant-tabs-tab) {
          > :global(.ant-tabs-tab-btn) {
            font: var(--font-p1);
            font-weight: 600;
            display: flex;
            flex-direction: row;
            column-gap: 8px;
            align-items: center;
            color: var(--theme-secondary-color);

            &:hover {
              color: var(--theme-primary-color);

              svg {
                color: var(--theme-red-color);
              }
            }

            svg {
              :global(.no-flexbox-gap) & {
                margin-right: 8px;
              }
            }
          }

          &:global(.ant-tabs-tab-active) {
            > :global(.ant-tabs-tab-btn) {
              color: var(--theme-primary-color);

              > svg {
                color: var(--theme-red-color);
              }
            }
          }
        }

        > :global(.ant-tabs-ink-bar) {
          height: 2px;
          background: var(--theme-red-color);
          border-radius: 4px 4px 0 0;
        }
      }
    }
  }

  &.simple {
    > :global(.ant-tabs-nav) {
      padding: 0;
      background: transparent;
      border: 0;
    }
  }
}
