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

$newsletter-background-color: $brand;

.widget {
  margin: {
    bottom: 10px;
  }
  padding: 20px;

  background: {
    color: #e1e1e1;
  }

  .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;
    }
  }


  &--newsletter {
    padding: 20px;
    background-color: $newsletter-background-color;

    /**
     * The newsletter widget on the homepage should be overlapping the slider
     * and so we're adding a negative margin to achieve this.
     */
    .site--home & {
      position: relative;

      @include mq(mq600) {
        margin-top: -75px;
      }
    }

    .widget__title {
      padding-bottom: 20px;
      margin-bottom: 20px;
      color: #fff;
      font-size: font-size(18);
      border-bottom: 1px solid darken($newsletter-background-color, 5%);
    }

    p {
      color: #fff;
      font: {
        weight: 400;
        size: font-size(16);
      }
      line-height: 1.4;
    }

    ul {
      margin: 0;
    }

    li {
      @include svg-background(tick);
      padding-left: 22px;
      margin-bottom: 15px;
      list-style: none;
      color: #fff;
      font-size: font-size(16);
      line-height: 1.2;
      background: {
        size: 12px 11px;
        repeat: no-repeat;
        position: 0px 4px;
      }
    }

    form {
      max-width: 100%;
    }

    input[type="email"] {
      margin-bottom: 10px;
      height: 35px;
      width: 100%;
      float: left;
      line-height: 35px;
      font-size: font-size(13);
      border: 0;

      @include mq(mq960) {
        margin-bottom: 0;
        width: percentage(210/357);
      }
    }

    button {
      padding: 0;
      width: 100%;
      float: right;
      font: {
        family: $heading-font;
        weight: 400;
        size: font-size(13);
      }

      @include mq(mq960) {
        width: percentage(120/357);
      }
    }
  }

  &--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;
    }
  }
}