/**
 * SAUserPrefs plugin styles
 */

@import (reference) "../../../../skins/elastic/styles/variables";
@import (reference) "../../../../skins/elastic/styles/mixins";

@grid-gutter-height: 15px;
@color-whitelist: #28a745;
@color-blacklist: #dc3545;

.listing.iconized tr {
  &.general > td.section::before {
    content: @fa-var-tools;
  }

  &.tests > td.section::before {
    content: @fa-var-cloud;
  }

  &.bayes > td.section::before {
    content: @fa-var-database;
  }

  &.headers > td.section::before {
    content: @fa-var-envelope;
  }

  &.report > td.section::before {
    content: @fa-var-file-alt;
  }

  &.addresses > td.section::before {
    content: @fa-var-address-card;
  }

  &.scores > td.section::before {
    content: @fa-var-tachometer-alt;
  }
}

table.propform {
  tr.sauphelp {
    margin-top: (ceil((@grid-gutter-height / 2) * -1));

    td {
      color: @color-form-hint;
    }
  }

  td.bayesdelete {
    padding-left: 0;
  }
}

table.langprefstable tr > .scroller,
table.addressprefstable tr > .scroller {
  width: 100%;
}

#address-rules-cont,
#spam-langs-cont {
  height: 400px;
  overflow: auto;
  width: 100%;

  html.layout-small &,
  html.layout-phone & {
    height: auto;
  }
}

table.sortable-table > thead > tr > th {
  > a {
    text-decoration: none;
    color: @color-font;
    white-space: nowrap;
  }

  > a::after {
    &:extend(.font-icon-class);
    display: inline-block;
    float: none;
    margin-left: .1em;
    font-size: .9rem;
    color: @color-list-icon;
  }

  &.sortedASC > a::after {
    content: @fa-var-long-arrow-alt-down;
  }

  &.sortedDESC > a::after {
    content: @fa-var-long-arrow-alt-up;
  }
}

table.spam-langs-table,
table.address-rules-table {
  margin-bottom: 0;
  overflow: hidden;

  &.fixedcopy {
    z-index: 2;
  }

  > thead {
    > tr > th {
      &.lang,
      &.email {
        width: auto;
      }

      &.rule {
        width: 10em;
      }

      &.tick {
        width: 10em;
        text-align: right;
      }

      &.control {
        width: 2.5em;
        text-align: right;
      }
    }
  }

  > tbody > tr {
    > td.rule {
      white-space: nowrap;
    }

    > td.lang,
    > td.email {
      .overflow-ellipsis;
      white-space: nowrap;
      max-width: 1px;
    }

    > td.tick {
      text-align: right;
      padding: 0 .75rem;
    }
  }
}

html.layout-small,
html.layout-phone {
  table.fixedcopy {
    display: none;
  }
}

table.spam-langs-table > tbody > tr > td {
  vertical-align: middle;
}

.saup-spam-char-row { // based on forms.less:.row.form-check
  padding: 0;
  display: flex;
  flex-wrap: nowrap;

  @media screen and (max-width: @screen-width-bs-phone) {
    & > *:last-child {
      width: 1%;
      min-width: 2.6rem;
    }
  }
}

table.records-table tr > .tick,
table.records-table tr > .control {
  > a::before {
    &:extend(.font-icon-class);
    display: inline-block;
    float: none;
    text-decoration: none;
  }

  > a.delete::before {
    content: @fa-var-trash-alt;
    color: @color-font;
  }
}

.whitelist_from > td.rule,
.whitelist_to > td.rule {
  color: @color-whitelist;
}

.blacklist_from > td.rule {
  color: @color-blacklist;
}

#test-scores-table {
  tr.form-group {
    margin-bottom: 0;
  }

  th {
    border-top: 0;
  }

  th, td {
    padding: .75rem;
  }
}

#listcontrols {
  display: block;
  text-align: right;
  width: 100%;
  font-size: 0.9em;
  margin-bottom: (ceil((@grid-gutter-height / 2) * -1));

  > a:not(.select) {
    margin-right: 0.5rem;

    &:last-child {
      margin-right: 0;
    }

    &::before {
      &:extend(.font-icon-class);
      display: inline;
      float: none;
    }

    &.import::before {
      content: @fa-var-upload;
    }

    &.delete-all::before {
      content: @fa-var-trash-alt;
    }
  }
}

span.helpicon::after {
  &:extend(.font-icon-class);
  float: none;
  display: inline-block;
  content: @fa-var-info-circle;
  margin-left: 5px;
}

#rcmfd_spamlevelchar {
  width: 40px;
  margin-left: -7px;
  text-align: center;
}

div.address-input {
  margin-bottom: @grid-gutter-height;
}

// Bootstrap 4.0.0 does not expect form-control elements in input-group-prepend but it makes layout easier so fix the border
.input-group-prepend:first-child {
  > select:last-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}

#rcmfd_spamaddress {
  min-width: 100px;
}

button.btn.saupusedefault::before,
div.footer .saupusedefault::before {
  .font-icon-solid(@fa-var-undo);
}

html.touch {
  #rcmfd_spamlevelchar {
    margin-left: -5px;
  }
}

html.layout-phone {
  // stack the input-group on small screens and fix the borders
  .address-input.input-group {
    display: block;

    input {
      width: 100%;
    }

    .input-group-prepend:first-child {
      margin-right: 0;
      margin-bottom: -1px;

      > :first-child {
        border-radius: 0;
        border-top-left-radius: 0.25em;
        border-top-right-radius: 0.25em;
      }
    }

    .input-group-append:last-child {
      margin-left: 0;
      margin-top: -1px;

      > :last-child {
        border-radius: 0;
        border-bottom-left-radius: 0.25em;
        border-bottom-right-radius: 0.25em;
      }
    }
  }

  table.address-rules-table > thead > tr > th.rule,
  table.address-rules-table > tbody > tr > td.rule {
    display: none;
  }

  .whitelist_from > td.email,
  .whitelist_to > td.email {
    color: @color-whitelist;
  }

  .blacklist_from > td.email {
    color: @color-blacklist;
  }
}