.gd-tabs {
  display: flex;
  flex-direction: row;
  height: var(--gd-exercise-tabs-height);
  width: min-content;
  background-color: var(--gd-exercise-bg-color);
  padding: 0;
  margin: 0;

  gap: var(--gd-exercise-tab-gap);
  background-color: var(--gd-exercise-tabs-bg-color);
  border-top-left-radius: var(--gd-exercise-app-border-radius);
  border-top-right-radius: var(--gd-exercise-app-border-radius);

  .gd-tab {
    &:first-child {
      border-top-left-radius: var(--gd-exercise-app-border-radius);
    }

    &:last-child {
      border-top-right-radius: var(--gd-exercise-app-border-radius);
    }

    display: flex;
    justify-content: center;
    align-items: center;

    width: min-content;

    margin: var(--gd-exercise-tab-margin);
    padding: var(--gd-exercise-tab-padding);

    background-color: var(--gd-exercise-bg-color-inactive);
    color: var(--gd-exercise-tab-color-inactive);
    border-radius: var(--gd-exercise-tab-border-radius);
    font-weight: var(--gd-exercise-tab-font-weight);

    text-transform: var(--gd-exercise-tab-text-transform);
    position: relative;

    // &::before {
    //   content: "";
    //   display: block;
    //   position: absolute;
    //   top: 0;
    //   left: 0;
    //   width: 100%;
    //   height: 3px;
    //   background-color: var(--gd-exercise-tab-accent-color);
    // }

    &--active {
      @extend .gd-tab;
      background-color: var(--gd-exercise-bg-color-active);
      color: var(--gd-exercise-tab-color-active);

      // &::before {
      //   content: "";
      //   display: block;
      //   position: absolute;
      //   top: 0;
      //   left: 0;
      //   width: 100%;
      //   height: 3px;
      //   background-color: var(--gd-exercise-tab-accent-color);
      // }
    }

    cursor: pointer;
    &--disabled {
      cursor: default;
    }

    &:last-child .gd-label {
      text-shadow: var(--gd-exercise-tab-text-shadow);
    }
  }
}