@use '../../assets/styles/colors';
@use '../../assets/styles/fonts';

.ff-tabs-container {
  box-sizing: border-box;

  .ff-tab-row {
    &--default {
      display: flex;
      gap: 8px;
      border: 1px solid var(--tabs-border-color);
      border-radius: 8px 8px 0 0;
      padding: 7px 8px 0;

      .ff-tab-button {
        &--default {
          border: none;
          background: none;
          padding: 0 4px;
          display: flex;
          flex-direction: column;
          cursor: pointer;

          .ff-tab-label {
            padding-bottom: 4px;
          }

          .ff-tab-bar {
            width: 100%;
            border-radius: 2px 2px 0 0;

            &--active {
              border-top: 2px solid var(--tabs-label-active-color);
            }
          }

          &.disabled {
            opacity: 0.5;
            cursor: not-allowed;
          }
        }
      }
    }

    &--capsule {
      display: flex;
      gap: 8px;
      border: 1px solid var(--tabs-border-color);
      border-radius: 8px;
      padding: 3px 4px;
      background-color: var(--tabs-bg-color);

      .ff-tab-button {
        &--capsule {
          background: transparent;
          border: none;
          padding: 3px 4px;
          border-radius: 4px;
          cursor: pointer;

          &.active {
            background-color: var(--tab-bg-color);
          }

          .ff-tab-bar {
            display: none;
          }
        }
      }
    }
  }

  .ff-tab-content {
    width: inherit;
  }
}