@import "_variables.scss";

footer {
  border-top: 1px solid var(--grey-10);
  margin: 0 1em 2em 1em;
  padding-top: 1em;
  display:flex;
  justify-content: center;

  .container {
    width:1200px;
    max-width:100%;
    display: grid;
    grid-template-columns: 50% auto auto;
    grid-template-areas:
      "logo links search"
      "license license socials";

    div {
      padding: 24px 12px;
    }

    .logo {
      grid-area: logo;
      img {
        display: block;
        width: 16em;
      }
    }

    .links {
      grid-area: links;
      display: flex;
      flex-direction: column;
      a {
        display: block;
        padding: 0.1em;
        font-size: 15px;
        color: var(--grey-70);
        text-decoration: none;
        font-weight: 400;
        white-space: nowrap;
        &:hover {
          color: var(--grey-80);
        }
      }
    }

    .search {
      grid-area: search;
      text-align: right;
      input {
        box-sizing: border-box;
        background: url("/img/icon-search.svg") no-repeat 12px center;
        background-color: var(--dora-primary-light);
        border: none;
        padding: 12px 12px 12px 48px;
        border-radius: 50vh;
        outline-color: var(--grey-40);
        width: 16em;
        &::placeholder {
          color: var(--grey-70);
        }
      }
    }

    .license {
      grid-area: license;
      font-size: 11px;
      color: var(--grey-60);
      line-height: 24px;

      a {
        color: var(--grey-60);
        text-decoration: none;
      }
    }

    .socials {
      grid-area: socials;
      line-height: 24px;
      text-align: right;
      a.google-material-icons {
        font-size: 28px;
        color: var(--grey-60);
        text-decoration: none;
        padding: 0 0.15em;
      }
    }

    @include media-large {
      grid-template-columns: 1fr 1fr;
      grid-template-areas:
        "search search"
        "links socials"
        "logo logo"
        "license license";

      div {
        padding: 12px;
      }

      align-items: center;

      .search {
        text-align: center;
        input {
          width: 100%;
        }
      }

      .links {
        width: 100%;
        justify-items: stretch;
        padding: 2em 0;
        flex-direction: row;
        a {
          flex: 1;
          text-align: center;
        }
      }
    }
    @include media-small {
      grid-template-columns: 1fr;
      grid-template-areas:
        "search"
        "socials"
        "links"
        "logo"
        "license";
      .links {
        border-top: 1px solid var(--grey-10);
        border-bottom: 1px solid var(--grey-10);
      }
      .socials {
        text-align: left;
        padding-bottom: 2em;
      }

      .logo {
        padding-top: 2em;
        img {
          width: 10em;
        }
      }
    }
  }
}
