@use "sass:list";
@use "../partials/palette";

.Card.Subnav {
  padding: 0;
  font-weight: 500;
  border-bottom: 0.1875rem solid palette.$borderNeutral;
  border-radius: 0;

  ul {
    justify-content: center;
    display: flex;
    flex-flow: column nowrap;
    margin-bottom: -0.1875rem;

    li.nav-item {
      align-self: center;

      .nav-link {
        text-decoration: none;
        border-bottom: 0.1875rem solid transparent;
        line-height: 3.31;
        color: palette.$accentDeEmphasized;
        padding-left: 0;
        padding-right: 0;
        margin-left: 1.25rem;
        margin-right: 1.25rem;

        &.active,
        &:hover,
        &:active {
          border-bottom: 0.1875rem solid list.nth(palette.$purple, 7);
        }
        &.active {
          color: list.nth(palette.$purple, 7);
          cursor: default;
          pointer-events: none;
        }

        .ph {
          line-height: 0.8;
        }
      }
    }
  }
}

@import "mq/mq-subnav";
