@import "base";

.footer {
  @include _padding(45px, 0px, 45px, 0px);
  background-color: $color-background-primary;
  box-shadow: 0 -2px 7px 1px rgba(0, 0, 0, 0.1);
  text-align: center;

  p {
    @include _font-size(17px);
  }

  label,
  .copyright {
    @include _font-size(16px);
  }

  small {
    @include _font_size(12px);
  }

  p,
  label {
    @include _padding(0px, 0px, 10px, 0px);
    font-weight: 600;
    margin: 0;
  }

  small {
    @include _padding(0px, 0px, 10px, 0px);
  }

  form {
    @include _margin(45px, 0px, 45px, 0px);
    padding: 0;
  }

  p,
  label,
  small {
    color: $color-text-secondary;

    a,
    a:visited,
    a:active {
      border: none;
      color: $color-text-secondary;
      text-decoration: none;
    }

    a:hover {
      border-bottom: 1px solid $color-text-secondary;
      color: $color-text-secondary;
    }
  }

  .social-media {
    @include _font-size(48px);
    @include _margin(40px, 0px, 0px, 0px);
    align-items: center;
    display: flex;

    a,
    a:hover {
      @include _margin(0px, 20px, 0px, 0px);
      color: $color-text-secondary;
      display: flex;
    }
  }

  input[type="email"] {
    border: none;
    border-radius: 0;
    margin: 0;
    vertical-align: middle;

    &:focus {
      border: none;
      outline: none;
    }
  }

  .footer-links {
    @include _margin(0px, -15px, 0px, -15px);
    text-align: left;
  }

  .button {
    @include _padding(9px, 15px, 11px, 15px);
    @include _margin(5px, 20px, 0px, 20px);
    border: 0;
  }

  .form--row__input {
    flex: 1;
  }
}

@media (max-width: $tablet-small-max-width) {
  .footer {
    text-align: center;

    img {
      @include _padding(25px, 0px, 0px, 0px);
      float: none;
    }

    tr {
      display: grid;
    }

    .form--row {
      flex-direction: column;
    }

    .social-media a {
      @include _margin(0px, 10px, 0px, 10px);
    }
  }
}

@media (max-width: $tablet-small-max-width) and (min-width: $tablet-small-min-width) {
  .footer {
    .button {
      margin: 0;
    }

    .form--row {
      align-items: baseline;
    }
  }
}

@media (max-width: $mobile-max-width) {
  .footer {
    .button {
      height: 50px;
      width: 100%;
    }

    .form__checkbox {
      @include _margin(5px, 0px, 20px, 0px);
    }

    .landscape-logo {
      max-width: 60%;
    }

    .social-media {
      @include _font-size(70px);
      @include _margin(50px, 0px, 25px, 0px);
      justify-content: space-between;
    }
  }
}
