@use "variables";

.fwe-bottom-navigation {
  width: 100%;
  display: flex;
  background: variables.$white;
  align-items: flex-start;
  justify-content: space-around;
  border-top: 1px solid variables.$border;
  height: 84px;
  padding: 22px 16px;
  .fwe-bottom-navigation-button {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    .fwe-icon {
      line-height: 0px;
    }
    display: flex;
    align-items: center;
    background: none;
    border: none;
    outline: none;
    color: variables.$hero-gray;
    position: relative;
    :after {
      content: "";
      position: absolute;
      top: -23px;
      left: 0px;
      right: 0px;
      height: 0px;
      background: variables.$hero;
      transition: height 0.3s ease;
    }
    &.fwe-selected {
      color: variables.$hero;
      cursor: default;
      :after {
        height: 4px;
      }
    }
    &:active {
      color: variables.$hero-active;
    }
  }
}