Desktop/stylesheets/components/fun/FunTabs.scss

// Copyright 2025 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only

@use '../../mixins';
@use '../../variables';
@use './FunConstants.scss';

.FunTabs__Tabs {
  position: relative;
  display: grid;
  grid-template-rows: min-content 1fr;
  z-index: 0;
  width: 100%;
  height: 100%;
}

.FunTabs__TabList {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-inline: 10px;
  height: FunConstants.$Fun__TabsListHeight;
}

.FunTabs__Tab {
  position: relative;
  flex: 1;
  padding-block: 12px;
  padding-inline: 2px;
  cursor: pointer !important;

  &[data-selected='true'] {
    // Note: This is needed to keep the hover state from later items from
    // covering the indicator during the animation.
    z-index: 1;
  }

  &:focus {
    // Handled by .FunTabs__TabButton
    outline: none;
  }

  &:not([data-selected='true']) {
    &:hover,
    &:focus {
      .FunTabs__TabButton {
        background: var(--axo-color-fill-primary);
      }
    }
  }
}

.FunTabs__TabButton {
  // Note: This must not have z-index for the animation
  position: relative;
  padding-block: 5px;
  padding-inline: 12px;
  border-radius: 9999px;
  text-align: center;
  @include mixins.font-body-1;
  color: var(--axo-color-label-primary);
}

.FunTabs__TabButtonIndicator {
  position: absolute;
  z-index: 1;
  border-radius: 9999px;
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  pointer-events: none;
  background: var(--axo-color-fill-primary-pressed);

  .FunTabs__Tab[data-focused='true'] & {
    outline: none;
    @include mixins.keyboard-mode {
      @include mixins.axo-focus-ring;
    }
  }
}

.FunTabs__TabButtonText {
  position: relative;
  z-index: 2; // Just above the TabButtonIndicator
}

.FunTabs__TabPanel {
  position: relative;
  display: flex;
  grid-column: 1;
  grid-row: 2;
  min-height: 0;
}