//@warn "remove magic numbers";

@mixin banner-alert() {
  background-color: $alert-color;
  padding: 0.8rem 0;
}

@mixin bar($percent: 100) {
  background: linear-gradient(to right, transparent 0%, transparent ((100 - $percent) * 1%), $nypl-bar-color ((100 - $percent) * 1%), $nypl-bar-color) 100%;
}

@mixin lead {
  font-size: 1.6rem;

  @include media($mobile-breakpoint) {
    font-size: 1.2rem;
  }
}

@mixin basic-list {
  list-style-type: none;

  li {
    margin-bottom: 0.5rem;
    margin-left: 0;
  }
}

@mixin bar-list {
  @include basic-list;

  h2 {
    font-size: 1.4rem;
  }

  li {
    span.count {
      color: $nypl-gray;
      display: inline-block;
      float: right;
      margin-right: 0.2rem;
    }
  }
}

@mixin secondary-title {
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1.5;
  margin: 0;
}

@mixin a11y-note {
  border-left: 1rem solid $alert-color;
  padding-left: 1rem;
}

@mixin general-note {
  border-left: 1rem solid $nypl-gray;
  padding-left: 1rem;
}

@mixin progress-indicator {
  color: $nypl-gray;
  margin: 0;
  padding: 0;
}

@mixin location-info {
  border-left: 1rem solid $nypl-light-gray;
  margin-bottom: 2rem;
  padding-left: 1rem;

  p {
    margin: 0;
    margin-bottom: 0.5rem;
  }

  .nypl-room {
    font-weight: bold;
  }

  .nypl-access {
    color: $highlight-color;
    font-weight: bold;
  }
}

@mixin location-hours {
  @include basic-table;

  margin-bottom: 2rem;

  .nypl-current {
    background-color: $nypl-yellow-tint;
  }

  @include media($mobile-breakpoint) {
    thead tr {
      @include screenreader-only;
    }

    tr {
      border: 0;
    }


    td {
      display: block;
      position: relative;
      width: 100%;

      &::before {
        display: block;
        float: left;
        font-weight: bold;
        margin-bottom: 2rem;
        width: 40%;
      }

      &:nth-of-type(1)::before {
        content: "Monday";
      }

      &:nth-of-type(2)::before {
        content: "Tuesday";
      }

      &:nth-of-type(3)::before {
        content: "Wednesday";
      }

      &:nth-of-type(4)::before {
        content: "Thursday";
      }

      &:nth-of-type(5)::before {
        content: "Friday";
      }

      &:nth-of-type(6)::before {
        content: "Saturday";
      }

      &:nth-of-type(7)::before {
        content: "Sunday";
      }
    }

  }
} // /@location-hours



//@warn "Move these mixins out of the microformats partial since they effect the entire style guide...";

@mixin related-links {
  border-top: $related-links-border-width solid $nypl-gray;
  padding-top: 2rem;
}

@mixin toolkit-example {
  border: $simple-border solid $nypl-light-gray;
  padding: ($general-padding * 3) $general-padding ($general-padding * 0.5);
  position: relative;

  .nypl-example-text {
    border: $simple-border solid $nypl-light-gray;
    border-left: 0;
    border-top: 0;
    color: $nypl-gray;
    display: inline-block;
    font-size: 1rem;
    font-weight: normal;
    left: 0;
    padding: 0.3rem $general-padding;
    position: absolute;
    top: 0;
  }
}

@mixin toolkit-example-dark {
  background: $nypl-footer-color;

  &::before {
    background-color: $inverted-link-color;
  }
}


//
// Discovery HP Image, H4 & copy section below the Hero
// TODO: Make a proper toolkit patter for this
// TODO: This is a bit hacky to override the toolkit's established grid styles, but in this case for medium sized viewports we need an breakpoint to hanle this layout:
//@warn "many magic numbers & work arounds here";

// Special case where there is an h3 that has special styling. here it is:

@mixin special-title(
    $color: $nypl-red,
    $font-size: 2rem,
    $font-weight: 200) {
  color: $color;
  font-size: $font-size;
  font-weight: $font-weight;

  @include media($mobile-breakpoint) {
    font-size: 1.75rem;
    margin: 0.85rem 0;
  }
}

@mixin quarter-image {
  width: 100%;

  .image-column-one-quarter {

    @include media($mobile-breakpoint) {
      float: left;
      margin-bottom: 1rem;
      padding-right: 0.5rem;
      width: 25%;
    }

    @include media($xtrasmall-breakpoint) {
      width: 100%;
    }
  }

  .image-column-three-quarters {

    @include media($mobile-breakpoint) {
      float: left;
      margin-bottom: 1rem;
      padding: 0 0.5rem;
      width: 75%;
    }

    @include media($xtrasmall-breakpoint) {
      width: 100%;
      float: none;
    }
  }
}