.c-tabs {
  font: {
    family: $ff-base;
    size: $fs-medium;
    weight: $fw-medium;
  }
  display: flex;
  color: rgba(map-get($dark-blue, 1), 0.4);
  box-shadow: inset 0px -2px 0px rgba(map-get($dark-blue, 1), 0.2);

  &__tab {
    padding: 15px 16px;
    transition: $transition-base;
    position: relative;
    font-family: inherit !important;
    cursor: pointer;
    box-shadow: inset 0px -2px 0px rgba(map-get($dark-blue, 1), 0.2);

    &::after {
      background-color: map-get($dark-blue, 1);
      height: 2px;
      border-radius: 2px;
      width: 0;
      position: absolute;
      content: "";
      bottom: 0;
      left: 0;
      transition: $transition-base;
    }

    &:hover {
      color: map-get($dark-blue, 3);
    }

    &--selected {
      color: map-get($dark-blue, 1);
      box-shadow: inset 0px 0px 0px rgba(map-get($dark-blue, 1), 0.2);

      &::after {
        background-color: map-get($dark-blue, 1);
        height: 2px;
        border-radius: 2px;
        width: 100%;
        position: absolute;
        content: "";
        bottom: 0;
        left: 0;
      }
    }
  }
}
