@import "../../../src/style/front-end/overides/colors";
@import "../../../src/style/front-end/overides/variables";
@import "../../../node_modules/bulma/sass/utilities/mixins.sass";

.purdue-home-quick-links {
  background: $black;
  border: 1px solid $boiler-gold;
  position: fixed;
  width: auto;
  right: 0;
  top: 50%;
  z-index: 999;
  display: flex;
  @include mobile {
    position: relative;
    top: 0;
    right: auto;
    flex-direction: column;
  }
  .accordion__heading {
    background: none;
    border: none;
    padding: 1rem;
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
    color: $boiler-gold;
    @include mobile {
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }
    span {
      writing-mode: vertical-rl;
      transform: scale(-1);
      color: $boiler-gold;
      font-family: $united-sans-condensed;
      font-weight: 700;
      font-size: 1.75rem;
      pointer-events: none;
      text-transform: uppercase;
      padding-bottom: 1rem;
      @include mobile {
        writing-mode: initial;
        font-size: 1.5rem;
        transform: none;
        padding-bottom: 0;
      }
    }
    cursor: pointer;
    &:after {
      content: "";
      background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='73.5391052px' height='73.5391052px' viewBox='0 0 73.5391052 73.5391052' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3Eclose_icon_circle%3C/title%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(36.7696, 36.7696) rotate(-315) translate(-36.7696, -36.7696)translate(10.7696, 10.7696)' stroke='%23cfb991' stroke-width='4'%3E%3Ccircle cx='26' cy='26' r='24'%3E%3C/circle%3E%3Cline x1='26.5' y1='14' x2='26.5' y2='38' stroke-linecap='round' stroke-linejoin='round'%3E%3C/line%3E%3Cline x1='25.6896552' y1='14.5116279' x2='25.6896552' y2='38.6976744' stroke-linecap='round' stroke-linejoin='round' transform='translate(25.6897, 26.6047) rotate(-90) translate(-25.6897, -26.6047)'%3E%3C/line%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
      transition: all 0.3s ease;
      width: 2.2rem;
      height: 2.2rem;
      display: block;
      position: relative;
      background-size: cover;
      transform: rotate(-45deg);
    }
    &.is-open {
      &:after {
        content: "";
        transform: rotate(0);
      }
    }
  }
  .accordion__content.navbar-find-info__items {
    padding: 1rem 3rem 0 1rem;
    width: auto;
    flex-direction: column;
    justify-content: space-around;

    &.show {
      display: flex;
    }
  }
}

.purdue-home-quick-links-static {
  margin-top: 3rem;
  margin-bottom: 3rem;
  padding-left: 3rem;
  padding-right: 3rem;
  @include touch {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  @include mobile {
    margin-top: 2rem;
    margin-bottom: 2rem;
    padding-left: 0;
    padding-right: 0;
  }
  .tagged-header-container {
    margin-bottom: 2rem;
    @include mobile {
      margin-bottom: 1.5rem;
    }
  }

  .quick-links-content {
    padding-left: 0;
    padding-bottom: 0;
    list-style-type: none;
    .quick-link__item {
      border-bottom: 2px solid $steam-gray;
      padding-bottom: 1.5rem;
      @include mobile {
        padding-bottom: 0.5rem;
      }
      &:not(:first-child) {
        padding-top: 1.5rem;
        @include mobile {
          padding-top: 0.5rem;
        }
      }
      .quick-link__link {
        color: #000;
        font-size: 1.25rem;
        font-weight: 700;
        text-decoration: none;
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}
