// Home - Reveal - Show all, more, next

@import "../base-shared";
@import "../home-variables";

[data-object="reveal-more"][data-readmore] {
  transition: height 500ms;
  overflow: hidden;
}

[data-object="reveal-more"] + [data-readmore-toggle],
[data-object="reveal-more"][data-readmore] {
  display: block;
  width: 100%;
}

.usajobs-show-more,
.usajobs-show-next {
  &__trigger {
    display: block;
    margin: $size-default $size-default 0;
    padding: $size-S;
    font-weight: bold;
    text-align: center;
    color: $color-base;
    background-color: $color-gray-lighter;

    &:visited {
      color: $color-base;
    }

    &::after {
      vertical-align: middle;
    }

    &[aria-expanded="false"] {
      &::after {
        @include icon-content("solid/angle-down", 1.7rem, 1.094rem);
      }
    }

    &[aria-expanded="true"] {
      &::after {
        @include icon-content("solid/angle-up", 1.7rem, 1.094rem);
      }
    }
  }
}

.usajobs-show-all {
  margin: $size-base $size-default;

  @include media($M) {
    margin-left: auto;
    margin-right: auto;
    width: 50%;
  }

  &__trigger {
    display: block;
    width: 100%;
    margin: 0;
  }
}

/* Fades the bottom of the text and smoothly transitions.
    Relies upon the readmore.js library: http://jedfoster.com/Readmore.js/
    From http://jsbin.com/xuciqap/edit?css,js,output */
.usajobs-read-more {
  display: block;
  position: relative;
  width: 100%;

  &::before {
    content: "";
    width: 100%;
    height: 0;
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 255, 1));

    // Be sure to use the same speed value as in your Readmore configuration,
    // keeping in mind that CSS transition speed is stated in seconds.
    transition: height 0.5s;
  }

  // Set the height of the gradient to 80 when CLOSED
  // Also when transitioning from OPEN to CLOSED
  &[aria-expanded="false"]:before,
  &[aria-expanded="true"].transitioning:before {
    height: 80px;
  }

  &[aria-expanded="false"].transitioning:before {
    height: 0;
  }

  &__link {
    padding: $size-S 0;
    font-weight: bold;
  }
}

.usa-accordion > ul .usajobs-read-more[aria-expanded="false"] {
  // This defeats an annoyingly specific accordion style from the Standards
  background-image: none;
}

.usajobs-read-more--bg {
  &::before {
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(241, 241, 241, 1));
  }
}