/*------------------------------------*\
  $WIDGETS
\*------------------------------------*/

$newsletter-background-color: $brand;

.widget {
  text-align: center;
  padding: {
    top: 60px;
    bottom: 60px;
  }

  .wrap {
    width: 1200px;
    max-width: 90%;
    margin: 0 auto;
    padding: 0;

    @include mq(mq960) {
      max-width: 95%;
    }     
  }

  .widget__title {
    margin-bottom: 20px;
    padding-bottom: 15px;
    color: $dark-grey;
    font-size: font-size(18);
    border-bottom: 1px solid rgba(#000, 0.1);
  }

  ul {
    margin: 0;
  }

  li {
    margin-bottom: 10px;
    list-style: none;
    font-size: font-size(16);
  }

  a {
    color: inherit;
    text-decoration: none;

    @include states {
      text-decoration: underline;
    }
  }

  &--downloads {
    background: #fff;
    border-top: 1px solid #e5e5e5;

    .flex {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }
  }

  &--navigation {
    background-color: $brand;

    .widget__title {
      padding-bottom: 20px;
      color: #fff;
      border-bottom: 1px solid darken($brand, 5%);
    }

    ul > li {
      border-bottom: 1px solid rgba(#fff, 0.3);
    }

    li {
      overflow: hidden;
      margin: 0;
      font-size: font-size(15);
    }

    > ul > li {
      &:first-child {
        a { padding-top: 0; }
      }

      &.last {
        border-bottom: 0;

        a { padding-bottom: 0; }
      }
    }

    a {
      padding: 20px 0;
      float: left;
      width: 100%;
      color: #fff;
    }

    ul ul {
      margin: {
        top: 10px;
        left: 15px;
      }

      li {
        float: left;
        width: 100%;
        border: 0;

        &:last-child a {
          padding-bottom: 0;
        }

        a { padding: 20px 0; }
      }
    }

    .active {
      > a {
        padding-bottom: 10px;
        font: {
          weight: 600;
        }
      }
    }

    li:last-of-type {
      margin-bottom: 0;
    }
  }

  &--links {
    li {
      margin-bottom: 15px;

      &:last-child {
        margin: 0;
      }
    }
  }

  &--tags {
    li {
      display: inline;
      margin: {
        right: 5px;
      }
    }
  }

  &--cta {
    overflow: hidden;
    margin-top: 30px;
    width: 100%;
    float: left;
    background: {
      color: #fff;
    }

    .widget__title {
      color: $brand;
    }

    p {
      margin-bottom: 10px;
    }

    > ul {
      li {
        margin-bottom: 10px;
        color: $dark-grey;
      }
    }

    .cta__action {
      @include svg-background(arrow-down);
      display: block;
      cursor: pointer;
      margin-top: 20px;
      padding: {
        top: 20px;
        left: 0;
        right: 0;
        bottom: 0;
      }
      width: 100%;
      color: $dark-grey;
      font: {
        family: $body-font;
        weight: 600;
        size: font-size(15);
      }
      text-align: left;
      background: {
        color: #fff;
        repeat: no-repeat;
        position: right 22px;
      }
      border: 0;
      border-top: 1px solid $light-grey;
      outline: none;
    }

    .cta__action[data-state="active"],
    .no-js .cta__action {
      @include svg-background(arrow-up);
      margin-bottom: 20px;
    }

    .no-js .cta__action {
      background-image: none;
    }

    form[data-state="hidden"] {
      display: none;
    }

    form[data-state="visible"] {
      display: block;
    }
  }
}