/* stylelint-disable max-nesting-depth, selector-max-compound-selectors, selector-no-qualifying-type, selector-max-id */

.crm-container {
  font-family: $font-family-base;

  a,
  a:link {
    color: $brand-primary;
    opacity: 1;

    &:hover {
      color: darken($brand-primary, $crm-darken-percentage);
    }
  }

  .status-overdue {
    color: $brand-danger !important;
  }

  .description {
    color: $crm-gray-matte;
    font-size: 13px;
    line-height: 18px;
  }

  pre {
    background-color: $crm-gray-lightest;
    border: 1px solid $input-border;
    color: $gray-darker;
    font-size: $font-size-base;
    line-height: normal;
    margin: 0;
    padding: 5px;
  }

  .solid-border-top {
    border-color: $crm-background;
  }

  .crm-form-block {
    border-radius: $border-radius-base !important;
  }

  table td .btn-slide-active ul.panel {
    background: $crm-white;
    border-radius: $border-radius-base;
    box-shadow: $crm-form-layout-shadow;
    padding: 0;
    top: 22px;

    li {
      background: $crm-white;
      cursor: default;
      padding: 0;
    }

    li .crm-hover-button.action-item {
      background: transparent !important;
      color: $crm-copy !important;
      line-height: 20px !important;
      padding: 10px 20px;
      text-align: left;
      text-transform: capitalize;

      &:hover {
        background: $crm-background !important;
        color: $crm-copy !important;
      }

      &.disabled {
        color: $crm-gray-matte !important;
        cursor: default;

        &:hover {
          background: $crm-white !important;
          color: $crm-gray-matte !important;
        }
      }
    }

    li:hover {
      background: $crm-background !important;

      .crm-hover-button.action-item {
        background: $crm-background !important;
        color: $crm-copy !important;

        &.disabled {
          background: $crm-white !important;
          color: $crm-gray-matte !important;
          cursor: default !important;
        }
      }
    }
  }

  .crm-section {
    color: $crm-copy;
    font-family: $font-family-base;
    font-size: $font-size-base;

    .label {
      color: $gray-darker;
      font-weight: $crm-font-weight-h3;
    }
  }

  a.crm-hover-button.action-item,
  .crm-hover-button.btn-slide {
    padding: 0 5px;
    text-transform: capitalize;

    &:hover {
      color: $brand-primary !important;
    }
  }

  span.btn-slide {
    background: none;
    display: inline-block;
    padding-right: 0 !important;
    text-indent: -500em;
    width: 5px;

    &::after {
      @include fa-icon($font-size-base, $fa-var-ellipsis-v, $gray-darker);
      background: none;
      right: -2px;
      text-indent: 0;
      top: 0;
      width: 5px;
    }

    &:hover {
      background: none;

      &::after {
        color: $brand-primary;
      }
    }

    .panel {
      text-indent: 0;
    }
  }

  .dataTables_wrapper {
    border-radius: $border-radius-child;
    box-shadow: $box-shadow;
    margin-bottom: 20px;

    // Sometimes there are .dataTables_wrapper > .dataTables_wrapper
    // blocks that produce double shadows.
    > .dataTables_wrapper {
      box-shadow: none;
    }

    table.dataTable {
      box-shadow: none !important;
      max-width: 100%;

      > thead > th {
        line-height: 1.4em;
        padding: 15px 20px;
      }

      > tbody > td {
        line-height: 1.4em;
        padding: 12px 20px;
      }

      > tbody > tr > td:not(.dataTables_empty):last-child {
        text-align: right;
      }
    }

    .crm-datatable-pager-top {
      background: $gray-lighter;
      border-bottom: 1px solid $crm-background;
      border-radius: $border-radius-child $border-radius-child 0 0;
      font-size: $font-size-base;
      padding-bottom: 39px;
      padding-top: 10px;

      .dataTables_length {
        font-size: $font-size-base;
        padding-left: 20px;
      }

      .dataTables_paginate {
        padding-top: 0;
      }
    }

    .crm-datatable-pager-bottom {
      @include clearfix;
      background: $crm-gray-lightest;
      border-radius: 0 0 $border-radius-child $border-radius-child;
      line-height: 1.8em;
      padding-bottom: 10px;
      padding-top: 10px;

      .dataTables_info,
      .dataTables_paginate {
        font-size: $font-size-base;
        padding-top: 0;
      }
    }

    .dataTables_info {
      color: $crm-copy;
      line-height: 25px;
      margin: 5px 0;
      padding-left: 20px;
      width: 50%;
    }
  }

  /**
   * @NOTE the table that goes straight after <h3> does not
   * need a shadow because in that case the shadow falls onto the <h3>.
   * The shadow instead is applied
   * to the *container* of the <h3> and <table>.dataTables_wrapper
   *
   * @TODO remove all the .dataTables_wrapper { box-shadow: none; }
   * from "per-page" styles and other files
   */
  h3 + .dataTables_wrapper {
    box-shadow: none;
  }
}

.required {
  &::after {
    display: none;
  }
}

.crm-search-tasks {
  background-color: $crm-white;
  border-radius: 0;
  box-shadow: $box-shadow;
  margin-bottom: 20px;

  td {
    padding: 10px 20px;
  }

  .font-size12pt {
    color: $gray-darker;
    font-size: $font-size-h2;
    font-weight: $crm-font-weight-bold;
    padding-bottom: 10px;
  }

  .font-size11pt {
    color: $gray-darker;
    font-size: $font-size-base;
    font-weight: $crm-font-weight-bold;
  }
}

hr {
  background-color: $hr-border;
}

a.sorting,
a.sorting_asc,
a.sorting_desc {
  background: none !important;
  display: inline-block;
  padding-left: 0;
  padding-right: 20px;

  &::after {
    position: absolute;
    right: 0;
  }

  &:not(.sorting) {
    &::after {
      top: 3px;
    }
  }
}

a.sorting::after {
  @include fa-icon($font-size-base, $fa-var-sort, $crm-grayblue-darker);
}

a.sorting_asc::after {
  @include fa-icon($font-size-base, $fa-var-sort-asc, $brand-primary);
}

a.sorting_desc::after {
  @include fa-icon($font-size-base, $fa-var-sort-desc, $brand-primary);
}

.crm-expand-row {
  line-height: 1em;
}