@import "global";

@include bonsai;

.card.colors {
  width: 33%;
  display: inline-block;
  vertical-align: top;

  .card-section {
    height: 100px;
  }

  .card-details {
    background-color: $bonsai-white;
    padding-top: 0.4375rem;

    code {
      font-family: Consolas, Monaco, "Andale Mono", monospace;
      border: none;
      background-color: transparent;
      padding: 0 0.4375rem;

      &.color-hex {
        font-size: 1.05rem;
      }

      &.color-sass {
        display: block;
      }
    }
  }

  .card-header {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
  }
}

.spacing-square {
  width: 0;
  height: 0;
  background-color: #bd91e3;
}

.color-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

.fixed-height-80-table-rows {
  tr {
    height: 80px;
  }
}

.background-line-hover {
  background-color: get-color(hover-background);
  border: 4px solid get-color(hover-border);
}

.dark-gray-background {
  .button {
    margin-bottom: 0;
  }
}

.floats {
  background: lightgray;
  padding: 0.875rem;

  .float-left {
    background: lightblue;
  }

  .float-right {
    background: pink;
  }

  p {
    padding: 0.875rem;
  }

  div + div {
    margin-left: 0.875rem;
  }
}

.sticky-space {
  height: 100px;
}

.sticky {
  background: $bonsai-white;
  border: $bonsai-magellan-border;

  .button.secondary {
    margin: 0;
    border: none;

    &:hover,
    &:focus,
    &:active {
      background-color: inherit;
      color: inherit;

      &::after {
        color: inherit;
      }
    }
  }

  label {
    line-height: 30px;
  }

  .magellan-separator {
    @include vertical-rule-helper(100%, 20px);
  }
}

.hero {
  &.image-example {
    background-image: url("../images/JSTOR_LibrarianHeader.jpg");
  }

  &.green-image {
    background-image: url("../images/Sustainability_Hero.png");
    background-size: contain;
  }
}

.sustainability {
  background-image: url("../images/Home_Module_Sustain.jpg");
}

// Bring in foundation docs styles
@import "foundation-docs/scss/code";
@import "foundation-docs/scss/reference";

code {
  background-color: $bonsai-very-light-gray;
}

.docs-variable-table {
  tbody tr:nth-of-type(even) {
    background-color: $bonsai-very-light-gray;

    &:hover {
      background: $bonsai-very-light-gray; // overrides foundation-docs hover style
    }
  }
}

// To add space right below the functioning example generated off of the .md html_example
.docs-code-live {
  margin-bottom: $bonsai-spacing-extra-large;
}

.add-note .icon-plus {
  margin-top: 3px;
}

#social-sharing-drop {
  > li:hover {
    box-shadow: none;
  }
}

#title-search,
#add-field-search {
  max-width: 400px;

  li {
    padding: 15px;
    list-style: none;
    border-bottom: 1px solid $bonsai-light-gray;
  }
}

#mega-menu {
  width: 600px;
}