@import '../../styles/variables';

.PageTitle {
  margin: 0 0 $spacing * 7 0;
  text-align: center;

  & > h1 {
    font-size: 28px;
    margin: 0;
  }

  @media screen and (min-width: $layout-mobile) {
    text-align: left;
    display: flex;
    align-items: center;

    & h1 {
      justify-self: flex-start;
      display: flex;
      flex: 1;
    }
  }

  &__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: $spacing * 4;

    @media screen and (min-width: $layout-mobile) {
      margin-top: 0;
    }
  }

  &__button {
    margin-top: $spacing * 4;
    @media screen and (min-width: $layout-mobile) {
      margin-top: 0;
      margin-left: $spacing * 4;
    }
  }

  &_link {
    color: $action-color;
    cursor: pointer;
    transition: color 0.1s linear 0s;

    &:hover {
      color: mix($action-color, $white, 80%);
    }
  }
}