// Signature count and signature graph

.signature-count {
  @extend %contain-floats;

  .signature-count-number {
    @include bold-48();
    font-weight: 700;
    margin-top: em(15, 36);
    margin-bottom: em(10, 36);
    @include media(tablet) {
      margin-top: em(25, 48);
      margin-bottom: em(10, 48);
    }

    span.text {
      @include bold-27();
    }
  }

  .signatures-on-a-map, .signature-count-goal {
    margin: $gutter-half 0 $gutter-half *-1;
    @include media(desktop) {
      margin-bottom: $gutter-half 0 $gutter-one-third *-1;
    }
  }
  .signatures-on-a-map {
    float: left;
    @extend %contain-floats;
  }
  .signature-count-goal {
    width: 30%;
    float: right;
    text-align: right;
    color: $secondary-text-colour;
    @extend %contain-floats;
  }

  .signature-count-progress {
    display: block;
    margin: 0;
    padding: 0;

    progress[value] {
      -moz-appearance: none;
      -webkit-appearance: none;
      appearance: none;
      display: block;

      height: 10px;
      width: 100%;

      border: none;

      &::-moz-progress-bar {
        background-color: $petitions-brand;
      }

      &::-webkit-progress-bar {
        background-color: $border-colour;
      }

      &::-webkit-progress-value {
        background-color: $petitions-brand;
      }

      &::-webkit-progress-inner-element {
        background-color: $border-colour;
        border: none;
      }
    }
  }
}

// Petition meta

.petition-meta {
  @extend %contain-floats;
  margin: $gutter 0;
  li {
    @include bold-24;
    margin-bottom: $gutter-two-thirds;
  }
  .label, .note {
    display: block;
    @include core-16;
    margin-bottom: 5px;
  }
  .note {
    color: $secondary-text-colour;
    margin-top: 10px;
  }
  details {
    @include core-14;
    margin-top: $gutter;
  }
  summary {
    margin-bottom: 0;
  }
}

.about-item-other-business {
  details {
    ul {
      list-style-type: disc;
      padding-left: 20px;
    }

    ol {
      list-style-type: decimal;
      padding-left: 20px;

      @include ie-lte(7) {
        padding-left: 28px;
      }
    }

    ul, ol {
      margin-top: em(5, 16);
      margin-bottom: em(10, 16);

      @include media(tablet) {
        margin-top: em(10, 16);
        margin-bottom: em(10, 16);
      }

      & li {
        margin: 0 0 em(2, 16);

        @include media(tablet) {
          margin: 0 0 em(2, 19);
        }
      }
    }

    h3 {
      margin: em(15, 16) 0 em(5, 16);

      @include media(tablet) {
        margin: em(15, 19) 0 em(5, 19);
      }
    }

    p {
      margin: 0 0 em(10, 16);

      @include media(tablet) {
        margin: 0 0 em(10, 19);
      }
    }

    hr {
      height: 0px;
      border: none;
      border-top: 1px solid $grey-2;

      margin: em(15, 16) 0;

      @include media(tablet) {
        margin: em(15, 19) 0;
      }
    }
  }
}
