hy-footer-action.scss

.hy-footer-action {
  align-items: center;
  border-top: 1px solid var(--grayscale-medium-dark);
  display: flex;
  flex-direction: row;
  padding: 8px 16px 16px 16px;
  place-content: center space-between;
  width: 100%;

  @include breakpoint($narrow) {
    margin: 0 auto;
    max-width: $fullhd;
    padding: 16px 24px 16px 24px;
  }

  @include breakpoint($wide) {
    padding: 16px 32px 24px 32px;
  }

  &__updated-text {
    @include font-size(14px, 24px);

    color: var(--grayscale-dark);
    font-family: var(--main-font-family);
    letter-spacing: 0;

    @include breakpoint($narrow) {
      @include font-size(16px, 24px);
    }
  }

  &__scroll-up {
    align-items: center;
    display: flex;

    .hy-footer-action__up-button {
      background-color: var(--brand-main-light);
      border: 0;
      box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.05);
      padding: 8px;

      &:hover {
        cursor: pointer;
      }
    }

    label {
      @include font-size(16px, 24px);

      color: var(--grayscale-dark);
      font-family: var(--main-font-family);
      letter-spacing: 0;
      margin-right: 8px;
    }

    svg {
      fill: var(--grayscale-white);
    }

    &:hover {
      label {
        text-decoration: underline;
      }
      .hy-footer-action__up-button {
        background-color: var(--brand-main);
      }
    }
  }
}