@import '../../core/src/style/variables';
:host {
  display: block;
}
/**
 * Results Header styles
 */
.results-header {
  padding: 15px 15px 10px 15px;
  background: $white;
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid $midgrey;
  justify-content: stretch;
  align-items: flex-end;

  // Column 1
  &-summary {
    padding: 3px; // To ensure visible focus
    margin-right: 1em;
    position: relative;
    width: 430px;
    flex: 3 1 auto;
    justify-self: stretch;
    
    //&-warning, // there is no longer such a class used .results-header-warning
    &-anon {
      display: inline-block;
      color: $red;
      margin: 0;

      &-warning {
        min-height: 20px;
      }

      wpt-icon {
        display: inline-flex;
        float: none;
        &:before {
          font-size: smaller;
        }
      }

      a {
        color: $red;
        text-decoration: underline;
      }

      .BomIcon--error {
        margin-right: $gutter-m;
        float: left;
        font-size: $font-size-xl;
        color: $red;
      }
    }


    &-top {
      text-transform: capitalize;
      font-weight: bold;
      display: flex;
      flex-direction: row;
      align-items: center;
      border: 1px solid $grey;
      height: auto;
  
      @media screen and (min-width: 1431px) {
        flex-direction: row;
      }
      @media screen and (max-width: 1430px) {
        flex-direction: column;
      }

      input { 
        font-size: x-large;
        @media screen and (min-width: 1431px) {
          width: inherit;
          min-width: 380px;
        }
        @media screen and (max-width: 1430px) {
          width: 100%;
        }
      }

      &-bomname-edit {
        border: none;
        text-overflow: ellipsis;
        padding-left: $gutter;
        font-size: 18px;
        font-weight: bold;
        font-style: normal;
        font-stretch: normal;
        line-height: normal;
        letter-spacing: normal;
        box-sizing: border-box;

        @media screen and (min-width: 1431px) {
          border-right: 1px solid $grey;
        }
        @media screen and (max-width: 1430px) {
          border-bottom: 1px solid $grey;
        }

        &.ng-invalid {
          border: 1px solid $red;
    
          &:focus {
            outline: none;
          }
        }
        &:focus {
          font-size: 16px;
          font-weight: normal;
        }
      }

      &-responsive {
        display: flex;
        align-items: center;
        width: 100%;
      }
    }

    &-sharestatus {
      margin-left: auto;
      button {
        margin: 0;
        line-height: inherit;
        min-height: inherit;
        font-weight: normal;
        padding: 0;
      }
      &-text {
        font-size: small;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.33;
        letter-spacing: normal;
        text-transform: capitalize;
        color: $blue;
        user-select: none;
        &.shared {
          text-decoration: underline;
          cursor: pointer;
        }
      }
    }

    &-totalParts {
      white-space: nowrap;
      justify-content: flex-end;
      padding-right: 1.5rem;
      margin: 0;
      font-weight: normal;
      font-style: normal;
      font-stretch: normal;
      line-height: 1.33;
      letter-spacing: normal;
      font-size: small;
    }

    &-settings {
      font-size: 14px;
      background-color: $middarkgrey;
      text-align: center;
      color: $white;
      border: 0;
      cursor: pointer !important;
      padding: 7px;

      &-items {
        position: absolute;
        padding: $gutter-m $gutter;
        background-color: $white;
        z-index: 99;
        border: 1px solid $grey;
        border-top: none;
        left: 0;
        right: 0;
      }

      .BomIcon--cog {
        width: 14px;
        height: 14px;
      }
      .BomIcon--arrow-down,
      .BomIcon--arrow-up {
        font-size: 8px;
        width: 8px;
        height: 8px;
      }
    }

    &-bottom {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      overflow: hidden;
  
      &-left {
        line-height: 1.4;
        font-size: 12px;
        padding-top: 5px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        
        p {
          line-height: inherit;
          margin: 0;
        }

        &-item {
          margin: 0.2em 0;
          line-height: 1.5;

          &-history {
            margin-top: 0.5em;

            button {
              line-height: inherit;
              min-height: inherit;
              text-transform: capitalize;
              text-decoration: underline;
              font-weight: normal;
              padding: 0;
            }

            &-button-text {
              // Isolating the underline to prevent an underline that extends to the count indicator bubble
              text-decoration: underline;
            }

            &-notification {
              font-size: 10px;
              color: $white;
              background-color: $blue;
              border-radius: 9px;
              display: inline-block;
              text-align: center;
              vertical-align: middle;
              padding: 1px 4px 1px 3px;
              min-width: 16px;
              min-height: 16px;
            }
          }
        }
      }       
    }
  }

  // Column 2
  &-filters {
    padding: 3px; // To ensure visible focus
    flex-direction: column;
    overflow: hidden;
    margin-right: 2em;
    width: 480px;
    flex: 1 1 auto;
    justify-self: stretch;
  }

  // Column 3
  &-buttons {
    padding: 3px; // To ensure visible focus
    width: 200px;
    max-width: 230px;
    flex: 1 1 auto;
    justify-self: stretch;
    display: flex;
    flex-direction: row;
  }

  &-errors {
    p {
      margin: 0;
      padding: 0 $gutter;
    }
  }

  &-regionSelect {
    float: left;
    border-left: 10px solid $evenlightergrey;

    &-label {
      font-size: $font-size-m;
      display: block;
      float: left;
      padding: 8px $gutter;
    }

    &-input {
      position: relative;
      width: 125px;
      float: left;
      padding: 5px 0;

      select {
        color: $black;
        border: 1px solid $grey;
        display: block;
        border-radius: 0;
        padding: 4px 10px;
        width: 100%;
        background-color: $white;
        -webkit-appearance: none;
        -moz-appearance: none;
        -o-appearance: none;
        appearance: none;
        cursor: pointer;

        &.touched {
          color: $black;
        }
      }

      select::-ms-expand {
        display: none;
      }

      .arrow {
        width: 0;
        height: 0;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        position: absolute;
        right: 10px;

        &--up {
          border-bottom: 4px solid $black;
          top: 13px;
        }

        &--down {
          border-top: 4px solid $black;
          bottom: 13px;
        }
      }
    }
  }

  &-search-total {
    display: inline-block;
    position: relative;
    float: left;
    margin-right: 10px;
    width: calc(50% - 5px);

    @media (min-width: 810px) {
      width: calc(50% - 5px);
      height: 115px;
    }

    @media (min-width: $wide-breakpoint) {
      height: 177px;
      width: calc(20% - 11.25px);
    }
    @media (max-width: $phablet-breakpoint) {
      width: 100%;
    }
  }

  &-search {
    width: 100%;

    input {
      width: 100%;
      color: $black;
      border: 1px solid $grey;
      margin-bottom: 1em;
      padding: 6px 34px 6px 10px;
      @media (max-width: $phablet-breakpoint) {
        margin-bottom: 3em;
      }
    }

    .BomIcon--mag-glass {
      color: $middarkgrey;
      position: absolute;
      font-size: 18px;
      top: 8px;
      right: 10px;
    }
  }

  &-dataDensity {
    padding-top: 0.5rem;
    display: inline-block;
    line-height: 19px;
    margin: 0 0 0 15px;
    wpt-button-toggle-group {
      wpt-button-toggle {
        font-size: small;
        border: 1px solid $middarkgrey;

        &.wpt-button-toggle-disabled {
          border: 1px solid $midgrey;
        }
      }
    }

    label {
      font-size: small;
      padding: 0 5px 0 0;
      font-weight: bold;
      text-transform: uppercase;
    }
  }

  &-errors {
    p {
      margin: 0;
    }
  }
  &-actions {
    display: flex;
    @media (max-width: 1666px) {
      flex-direction: column;
    }
  }
  &-breadcrumb {
    margin: 0;
    padding: 5px 15px;
    list-style: none;
    li {
      font-weight: bold;
      cursor: pointer;
      display: inline;
      font-size: small;
      color: $black;
      & + li:before {
        content: '/\00a0';
      }
      a {
        color: black;
        text-decoration: none;
      }
      &:last-child {
        color: $midgrey;
        cursor: default;
      }
    }
  }
  &-totalPrice {
    width: 100%;
  }
  &-bottom {
    padding: 10px 15px 0 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 10px;
  }
}