/********************************************************* {COPYRIGHT-TOP} ***
* Licensed Materials - Property of IBM
* 5725-Z22, 5725-Z63, 5725-U33, 5725-Z63
*
* (C) Copyright IBM Corporation 2017
*
* All Rights Reserved.
* US Government Users Restricted Rights - Use, duplication or disclosure
* restricted by GSA ADP Schedule Contract with IBM Corp.
********************************************************** {COPYRIGHT-END} **/
/** background colours, aka 50 shades of grey **/
body.apim
html
  background-color: $background-primary

.apim
  /** text colors **/
  color: $text-primary !important // @stylint ignore important

  .secondaryText
    color: $text-secondary

  .error
    color: $text-error

  a
  select:not(.bx--select__input),
  .highlightText
  .highlightTextContainer:hover .hoveredHighlightText
  .hoveredHighlightText:hover
    color: $text-link

  .toc
    .tocItem .selected:before
      background-color: $text-link

    a:not(.selected)
      color: $text-primary

  label.description
  form label // @stylint ignore colons
    color: $text-label

  .secondaryBackground
  .secondaryBackground .spinner:after
  .minorColumnRight
  .unselectedCollectionContent
  .tableHeaderBackground
  .toc
    background-color: $background-secondary

  .searchCollection
    .searchInput
    .searchIcon
      background-color: $background-secondary

  .tertiaryBackground
    background-color: $background-tertiary

  .unselectedCollectionContent:hover
    background-color: inherit

  /* Help dialog */
  .helpDialog
    background-color: transparent
    color: #dedfe0

    .modal-content
      background-color: transparent
      border: 0
      box-shadow: none

    h1
      margin: 0

    button
      margin-bottom: 10px
      min-width: 30%

    a
      color: white

    hr
      margin-top: 10px
      width: 10%

    ul
      width: 70%

      li
        margin-bottom: 10px

    .modal-header
    .modal-footer
      border: 0

  .GET
    background-color: $http-get

  .PUT
    background-color: $http-put

  .POST
    background-color: $http-post

  .DELETE
    background-color: $http-delete

  .OPTIONS
    background-color: $http-options

  .PATCH
    background-color: $http-patch

  .HEAD
    background-color: $http-head

  .tag.SOAP
  .tagContainer .tag.SOAP
    background-color: $tag-soap
    color: $text-tertiary

  .tag.REST
  .tagContainer .tag.REST
    background-color: $tag-rest
    color: $text-tertiary

  /** border colours **/
  .primaryBorder
  .majorColumnLeft
  .minorColumnRight
  select
  .strongBorderBottom
  .on-drag-hover
    border-color: $border-primary

  .secondaryBorder
  .tableHeaderBackground
  .leftColumnSize
  .rightColumnPosition
  .tableEntry
  .approvals
  .approval
  .approvalResolution
  .verticalSeparator
  .section
  .softBorderBottom
  .on-drag-enter
    border-color: $border-secondary

  .searchCollection
    .searchInput
    .searchIcon
      border-color: $border-secondary

  .toolbar
    &
    .contentBox
      border-color: $border-secondary

  /** nav banner **/
  .mainBanner
    color: white

    a
      color: white

    nav
      size: 100% 60px
      transition: background-color .5s linear

    .dropdown-menu a
      color: $text-primary

    .subBanner
      a
        color: $text-primary

        &.backLink
          color: $text-link
          line-height: 50px
          margin-top: 12px

      button span.caret
        color: $text-link
        float: right
        margin-top: 12px

      .selected md-icon
        fill: $text-link

      md-icon
        fill: $text-primary

    li.subBanner
      background-color: $background-secondary
      color: $text-primary

  nav.subBanner
    background-color: $white
    color: $text-primary

    .menuList li.selected
      border-color: $text-link
      opacity: 1

      a
        color: $text-link

  md-sidenav .navItem.selected a
    background-color: #dce1ff

  /* material styles */
  md-slider
    .md-thumb:after
      border-color: $text-link

    .md-sign:after
      border-top-color: $text-link

  md-input-container
    &.md-input-focused
      label:not(.md-no-float)
        color: $text-link

    &:not(.md-input-invalid).md-input-focused .md-input
      border-color: $text-link

  md-radio-button
    .md-off
      border-color: $text-link

    &:not([disabled]).md-primary
      &.md-checked .md-off
        border-color: $text-link

      .md-on
        background-color: $text-link

  md-slider
    .md-track.md-track-fill
    .md-thumb:after
    .md-sign
      background-color: $text-link

  md-switch.md-checked .md-bar
    background-color: $text-link

  md-checkbox.md-primary.md-checked:not([disabled]) .md-icon
    background-color: $text-link

/** sticky note **/
  .stickyNote
    background-color: #fefbea
    border-radius: 5px
    margin: 10px auto
    max-width: 95%
    min-height: 25px
    padding: 10px

  .stickyNote a
    color: rgb(1, 128, 233)

  .catalogItem h1
    color: $text-link

  .catalogs.centerColumn
    .stickyNote
      margin: 20px auto 0

  /** highlight & hover colours **/
  /** primaryHighlight, secondaryHighlight, tertiaryHighlight provide three shades of blue highlight **/
  /** use primary for bold highlighting, or highlighting against non-white backgrounds **/
  .primaryHighlight:hover
  .lockingSection
    background-color: $highlight-primary

  .secondaryHighlight.selected
  .secondaryHighlight:hover
    background-color: $highlight-secondary

  .tertiaryHighlight:hover
  .tableEntry:hover
    background-color: $highlight-tertiary

  /** approval colors **/
  .approvalResolution.rejected
  .approvalResolution.cancelled
    background-color: $approval-rejected

  .approvalResolution.approved
    background-color: $approval-approved

  /** details page **/
  .detailsEditor
    background-color: $background-secondary
    padding: 20px 20px 20px0

    button
      &.iconOnlyButton
        color: #b3b3b4

  .detailsContainer
    background-color: $background-primary
    border: 1px solid $border-secondary
    margin-bottom: 20px

    h2
    h3
      /* background-color: $background-secondary*/
      padding: 5px 15px 5px0

    h2
      color: $text-link

    h4
      font-weight: normal
      padding-top: 5px

  .detailsSection
    padding: 10px 20px

    .leftColumn
      display: inline-block
      vertical-align: top
      width: 14%

    .rightColumn
      display: inline-block
      width: 85%

  .detailsSubSection
    border: 1px solid $border-secondary
    border-bottom: 0
    padding-bottom: 20px

    &:last-child
      border-bottom: 1px solid $border-secondary

  .detailsSplitSection
    border: 1px solid $border-secondary
    box-shadow:0 1px 3px 0 rgba(0, 0, 0, .1)
    margin-bottom: 7px

  .editorBar
    display: flex
    flex-wrap: wrap
    padding: 5px 10px
    width: 100%

    h5
      margin-top: 10px

  .editorContent
  .editorBar
    md-input-container
      flex: 1
      min-width: 300px

    table md-input-container // @stylint ignore colons
      min-width:0
      padding: 0
      width: 100%

  .editorBar table md-input-container
    margin: 0

  .editorContent
  .editorBar
    table tbody tr:hover td // @stylint ignore colons
      border: 0
      box-shadow: none

  button
    background-color: white
    border: 1px solid $text-link
    color: $text-link

    &:not(:disabled):not(.bx--modal__close)
      &:hover
      &:focus
        background-color: $text-link
        color: white

    &.textOnlyButton
      &:not(:disabled)
        color: $text-link

      &:hover
      &:focus
        text-decoration: underline

    &.buttonAndLabel
    &.iconOnlyButton
      &.propertyRequired // @stylint ignore colons
        background-color: #4278bf
        border-radius: 50%

      &:not(:disabled)
        color: rgba(0, 0, 0, .5)

        &:hover
        &:focus
          background-color: transparent
          color: $text-link

    + button.iconOnlyButton.dropdown-toggle
        color: $text-link

  /** spinner icon **/
  .spinner
    background: #ffffff
    background: linear-gradient(left, $text-link 10%, rgba(255, 255, 255, 0) 42%)

    &:before
      background-color: $text-link

    &:after
      background-color: white

  /** getting started menu **/
  .gettingStarted
    md-bottom-sheet.md-list
      background-color: #eeefff

      md-list-item
        border-bottom: 1px solid #d8d8d8

        .md-list-item-content
        .material-icons
          color: $text-link !important // @stylint ignore important

    &.secureGatewayTour .wraplist .md-list-item-content:hover
      color: $text-link

  .gettingStartedMinimized
    .md-button.md-fab
      background-color: $text-link
      border: 0
      color: white

      &:hover
        background-color: $text-link

  .tooltipContainer .tooltip .tooltip-arrow:after
    color: $text-link

  /** file selector **/
  .fileSelector:not(.fileSelected) .btn
  .fileSelector.fileSelected.showAsIcon .fileSelect
    border: 1px solid $text-link
    color: $text-link

    &:hover
      background: $text-link
      color: white

  .showAsIcon .fileSelect span
    color: $text-link

  .environmentDetails .registryMenu button:focus
    border-bottom: 2px solid $text-link

  .usersCollection a.secondaryText
    color: $text-link

  .rightArrow:hover
  .leftArrow:hover
    color: white

  .card .approveComment div:hover
    color: $text-link

  .feedbackBox .contentArea .ratingBox .selected .material-icons
    color: $text-link
    font-size: 64px

  .comboBox
    input:focus
      border-color: $text-link

      + .input-group-btn button
        border-color: $text-link

  .messageArea .INFO
    color: $text-link

  .ace_search
    background-color: #F7F9F8
    color: black

    input
      color: black

    button
      background-color: transparent
      border: 0
      min-height:0
      min-width:0

  .pagination >
    .active >
      a
      a:hover
      a:focus
      span
      span:hover
      span:focus
        background-color: $text-link
        border-color: $text-link

    li > // @stylint ignore colons
      a
      span
        &:hover
        &:focus
          color: $text-link