@use "../variables.scss";
@use "../mixins.scss";

#footer {
  background: variables.$clr_footer;
  margin: 0;
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  align-items: flex-start;
  padding: variables.$innerContainerMargin;

  .footer-column {
    color: variables.$clr_footer_sleep;
    display: flex;
    flex-direction: column;
    margin: 0 20px 0 0;

    h2 {
      font: variables.$sz_l_footer_h "Montserrat", sans-serif;
      font-weight: 600;
      color: white;
      margin-bottom: 0;

      @include mixins.footer_overflow {
        font-size: variables.$sz_m_footer_h;
      }

      @include mixins.footer_overflow2 {
        font-size: variables.$sz_s_footer_h;
      }
    }

    hr {
      margin: 0 0 10px 0;
      border: 1px dotted white;
    }

    a {
      color: inherit;
      text-decoration: none;
      margin: 0 0 5px 0;
      font: 16px "Montserrat", sans-serif;
      font-weight: 500;

      &:hover {
        color: variables.$clr_footer_active;
      }

      @include mixins.footer_overflow {
        font-size: variables.$sz_m_footer_p;
      }

      @include mixins.footer_overflow2 {
        font-size: variables.$sz_s_footer_p;
      }
    }

    .footer-social {
      display: inline-flex;
      align-items: center;
      border-radius: 5px;

      img {
        border-radius: 10px;
        width: 35px;
        height: 35px;
        margin: 0 15px 0 0;
      }

      &:hover {
        background: variables.$clr_footer_active;
        color: black;
      }
    }

    p {
      font: 16px "Montserrat", sans-serif;
      font-weight: 500;
      color: inherit;
      margin: 0;

      @include mixins.footer_overflow {
        font-size: variables.$sz_m_footer_p;
      }

      @include mixins.footer_overflow2 {
        font-size: variables.$sz_s_footer_p;
      }
    }

    &:last-of-type {
      margin: 0;
    }
  }
}