// В этом файле должны быть стили для БЭМ-блока page-footer, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority

.footer {
  color: #ffffff;
  display: flex;

  .footer-left {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    flex-basis: 50%;
    background: #f9f9f9;
    padding: 50px 60px 0 0;

    .footer-left__heading {
      max-width: 540px;
      display: flex;

      .left__heading-logo {
        padding-right: 175px;
      }

      .left__heading-socials {
        display: flex;
        align-items: center;

        .heading-socials__item {
          display: block;
          position: relative;
          height: 40px;
          width: 40px;
          margin-left: 30px;
          background: #6dacde;

          &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            background-repeat: no-repeat;
            background-position: center;
          }

          &._fb::before {
            background-image: url("../img/footer-fb.svg");
          }

          &._inst::before {
            background-image: url("../img/footer-inst.svg");
          }

          &._telegram::before {
            background-image: url("../img/footer-telegram.svg");
          }
        }
      }
    }

    .footer-left__nav {
      margin: 30px 0 60px;
      max-width: 540px;

      ul {
        display: flex;
        flex-wrap: wrap;

        li {
          font-size: 16px;
          line-height: 21px;
          color: #1a1a1a;
          padding-top: 30px;
          flex: 0 1 33.3333%;

          a {
            &:hover {
              text-decoration: underline;
            }
          }
        }
      }
    }

    .footer-left__subscribe {
      max-width: 540px;
      font-size: 16px;
      line-height: 21px;
      color: #1a1a1a;

      .left__subscribe-title {
        margin-bottom: 20px;
      }

      .left__subscribe-form {
        input {
          background: linear-gradient(0deg, #ffffff, #ffffff);
          border: 1px solid #dcddde;
          height: 60px;
          width: 309px;
          padding-left: 29px;
          font-size: 16px;
          line-height: 21px;
          color: #cccdcf;
        }

        button {
          background: linear-gradient(0deg, #6dacde, #6dacde);
          padding: 20px 48px;
          margin-left: 30px;
          font-size: 16px;
          line-height: 21px;
          color: #ffffff;
          font-weight: 700;
        }
      }
    }

    .footer-left__devs {
      max-width: 540px;
      width: 100%;
      margin-top: 60px;

      span {
        font-size: 15px;
        line-height: 130%;
        color: #1a1a1a;
        padding-right: 6px;
      }
    }
  }

  .footer-right {
    padding: 50px 0 120px 100px;
    flex-basis: 50%;
    background: #025ea1;

    .footer-right__contacts {
      font-size: 16px;
      line-height: 21px;

      .right__contacts-item {
        margin-bottom: 40px;

        .contacts-item__title {
          font-weight: 700;
        }

        .contacts-item__list {
          margin-top: 20px;
          font-weight: 300;
        }
      }
    }

    .footer-right__copyright {
      margin-top: 90px;
      font-size: 15px;
      line-height: 130%;
      font-weight: 300;
      max-width: 460px;
    }
  }
}
