//                                            888
//                                            888
//                                            888
// .d8888b   .d88b.   8888b.  888d888 .d8888b 88888b.
// 88K      d8P  Y8b     "88b 888P"  d88P"    888 "88b
// "Y8888b. 88888888 .d888888 888    888      888  888
//      X88 Y8b.     888  888 888    Y88b.    888  888
//  88888P'  "Y8888  "Y888888 888     "Y8888P 888  888

.attached-at-top {
  margin-top: $space-m;
  position: relative;

  &:before {
    border-left: $border-base;
    content: '';
    height: $space-m;
    left: 50%;
    position: absolute;
    top: (-$space-m);
  }
}

.button.button-new-request {
  align-items: stretch;
  display: flex;
  flex-direction: row;
  font-size: $font-size-m;
  margin: 1rem auto;
  max-width: 100%;
  padding: 0;

  @include breakpoint(m) {
    font-size: $font-size-xxxl;
  }

  &:active,
  &:focus,
  &:hover {
    > div {
      background-color: color(green, 40);

      &.button-icon {
        background-color: $color-theme-base-background;
      }
    }
  }

  > div {
    background-color: $color-state-success-link;
    color: $color-theme-dark-text;
    padding: $space-m;

    @include breakpoint(m) {
      padding: $space-m $space-l;
    }

    &.button-icon {
      background-color: $color-theme-base-background;
      color: color(grey);
      display: flex;
      flex-direction: column;
      padding: $space-s;
      width: $space-xl;

      @include breakpoint(m) {
        padding: $space-m;
        width: 7rem;
      }

      > * {
        display: flex;
        flex: 1;
        flex-direction: column;
        height: $space-m;
        width: $space-m;

        @include breakpoint(m) {
          width: $space-xl;
        }
      }
    }
  }

  svg {
    display: block;
    flex: 1;
    height: $space-m;
    width: $space-m;

    @include breakpoint(m) {
      height: $space-l;
      width: $space-l;
    }
  }
}

.commodities-select .input-with-button button {
  padding: 0 $space-m;
}

.commodities-select-list {
  margin-left: (-$space-m);
  margin-right: (-$space-m);
  padding: ($space-l + $space-s) $space-m $space-m;
  position: relative;

  @include breakpoint(m) {
    margin-left: 0;
    margin-right: 0;
  }
}

.ind-comm {
  align-items: center;
  border-bottom: 1px solid color(black, 0, 10);

  @include breakpoint(m) {
    display: flex;
  }
}

.ind-comm-value {
  font-size: $font-size-xs;
  font-weight: $font-weight-bold;
  padding: $space-xs $space-s 0;
  text-align: center;

  @include breakpoint(m) {
    border-right: 1px solid color(black, 0, 10);
    flex: 0 0 auto;
    padding: $space-s;
    text-align: left;
    width: 120px;
  }
}

.ind-comm-name {
  padding: $space-xs $space-s;
  text-align: center;

  @include breakpoint(m) {
    flex: 1 1 100%;
    text-align: left;
  }
}

.ind-comm-button {
  padding: $space-xs $space-s $space-s;
  text-align: center;

  @include breakpoint(m) {
    flex: 0 0 auto;
    padding: $space-xs $space-s;
    text-align: right;
  }

  button {
    font-size: $font-size-xs;
    padding: $space-xs;
  }
}

.new-request-button {
  > div {
    display: inline-block;
  }
}

.search-actions-buttons {
  text-align: center;

  @include breakpoint(m) {
    align-self: center;
    flex: 1 0 auto;
    margin-left: $space-m;
    text-align: right;
  }

  .button-spinner {
    min-height: 40.75px;
  }
}

.search-actions-name {
  margin-bottom: $space-m;

  .floating-label-group {
    margin: 0;
  }

  input {
    border-width: 0;
  }

  label {
    color: $color-theme-dark-text;
  }
}

.search-actions-wrapper {
  @include breakpoint(m) {
    align-content: center;
    align-items: stretch;
    display: flex;
  }
}

.search-column-order {
  align-items: center;
  display: flex;
  padding: $space-s;

  &:nth-child(odd) {
    background-color: color(grey, 95);
  }

  > div {
    padding-left: $space-s;
  }
}

.search-column-order-wrapper {
  border: $border-base;
}

.search-options {
  .toggle-switch label {
    margin-bottom: 0;
  }
}

.search-settings-group {
  padding-top: $space-m;

  + .search-settings-group {
    @include breakpoint(l) {
      padding-top: 0;
    }
  }
}

.search-sort-order {
  .toggle-switch {
    border-radius: 0 0 $space-s $space-s;
    border-top-width: 0;

    label {
      &:first-of-type {
        border-top-left-radius: 0;
      }

      &:last-of-type {
        border-top-right-radius: 0;
      }
    }
  }
}

.show-query {
  white-space: pre-wrap;
}

.show-query-button-container {
  @include breakpoint(m) {
    text-align: right;
  }
}

.site-query {
  dw-simple-select {
    .form-group {
      margin-top: $space-m;
    }

    &:first-child .form-group {
      margin-top: 0;
    }
  }
}

.site-search {
  h2:only-child {
    margin-bottom: 0;
  }
}

.site-search-header {
  background-color: $color-theme-dark-background;
}

.table-results {
  h3 {
    @include breakpoint(m) {
      font-size: 1.2em;
    }
  }

  thead th {
    text-align: center;

    @include breakpoint(m) {
      font-size: 1.2em;

      button,
      .button {
        font-size: 0.8em;
      }
    }

    pre {
      font-size: $font-size-s;
    }

    &.text-left {
      text-align: left;
    }
  }

  tbody {
    td {
      white-space: nowrap;
    }

    .group-off,
    .group-on {
      td:first-child {
        border-bottom-width: 0;
        border-top-width: 0;
      }
    }

    .group-on td {
      background-color: color(grey, 95);
    }

    .group-start {
      td:first-child {
        border-top-width: 1px;
      }
    }

    .subtotal,
    .total {
      th,
      td {
        background-color: color(grey, 90);
        font-weight: $font-weight-bold;
      }
    }

    .total {
      th,
      td {
        background-color: color(grey, 85);
        white-space: normal;
      }
    }
  }
}

.table-searches.table-responsive tbody {
  tr {
    td.query-deleted {
      background-color: $color-state-error-background-alt;
      color: $color-state-error-text;
      font-style: italic;
      padding: $space-s $space-m !important;
      text-align: center;
    }

    &:nth-child(odd) td.query-deleted {
      background-color: $color-state-error-background;
    }
  }
}

.table-searches.table-responsive {
  thead th {
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
  }

  tbody {
    tr {
      &:nth-child(odd) td {
        background-color: $color-theme-dark-background-alt;
      }
    }

    th:only-child,
    td:only-child {
      @include breakpoint(s) {
        padding-bottom: 0 !important;
        padding-top: 0 !important;
      }
    }

    td {
      vertical-align: middle;
    }
  }

  th,
  td {
    padding: $space-xs $space-m !important;

    &:first-child {
      padding-top: $space-m !important;

      @include breakpoint(s) {
        padding-top: $space-xs !important;
      }

      @include breakpoint(m) {
        min-width: 300px;
      }
    }

    &:last-child {
      padding-bottom: $space-m !important;

      @include breakpoint(s) {
        padding-bottom: $space-xs !important;
      }
    }

    @include breakpoint(s) {
      border-right: 1px solid color(white, 100, 20);

      &:last-child {
        border-right-width: 0;
      }
    }
  }

  button {
    border-color: color(white, 100, 50);
  }

  .query-desc {
    font-size: $font-size-s;
  }

  .query-name {
    font-size: $font-size-m;
  }

  .query-system,
  .query-type {
    white-space: nowrap;
  }

  .table-button-cell {
    button {
      margin: 0.25rem;
      white-space: nowrap;

      + button {
        margin-left: 0.25rem;
      }
    }
  }

  .table-button-wrapper {
    @include breakpoint(l) {
      white-space: nowrap;
    }
  }
}

.table-selector {
  margin-bottom: $space-m;

  @include breakpoint(m) {
    margin-bottom: 0;
  }

  select {
    background-color: $color-theme-dark-link;
    border-width: 0;
    font-weight: $font-weight-bold;
  }
}

.table-subheads {
  margin: 0;
  padding: 0;

  li {
    display: inline;
    list-style: none;
    margin-bottom: 0;

    + li {
      border-left: 1px solid color(white, 100, 50);
      margin-left: $space-s;
      padding-left: $space-s;
    }
  }
}