// ------------------------------------\
// Dashboard
// ------------------------------------/

.a-filter-add-button {
  @extend .a-btn-icon;
  min-height: 24px;
  margin-top: 1px;
}

.a-inputchip {
  @include a-fontSize16;
  display: flex;
  width: fit-content;
  max-width: 150px;
  height: 32px;
  padding: 8px 0 6px 18px;
  border-radius: 18px;
  align-items: center;

  span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .a-inputchip-delete {
    display: flex;
    width: 36px;
    height: 42px;
    padding-bottom: 3px;
    cursor: pointer;
    background: transparent;
    border: none;
    border-radius: 50%;
    align-items: center;
    justify-items: center;
  }
}


.project-dashboard {

  input {
    &[type='time'] {
      max-width: 100px;
    }
  }

  .w-auto {
    width: auto !important;
  }

  .dashboard-prefilled {
    display: none;
  }

  // Header for dashboard
  .dashboard-header {
    height: $spacer * 6;
    background: $blue-dark;

    @include media-breakpoint-up( md ) {
      height: $spacer * 9;
    }

    .a-globalNav-main {
      margin-top: $spacer * 8;

      @include media-breakpoint-up( md ) {
        margin-top: 2px;
      }

      li {

        a {
          @include media-breakpoint-up(md) {
            color: $white;
          }

          &.globalNav-active {
            @include media-breakpoint-up(md) {
              color: $white;
              border-bottom: 3px solid $white;
            }
          }
        }
      }
    }

    .a-globalNav-logo {
      margin-top: 0;

      @include media-breakpoint-up( sm ) {
        margin-top: -3px;
      }

      .an-logo {
        max-width: 90px;
        margin-top: -6px;
        margin-right: 0;

        @include media-breakpoint-up( sm ) {
          max-width: 110px;
          margin-top: -9px;
        }
      }

      .an-logo-text {
        display: inline-flex;
        max-width: 120px;
        white-space: nowrap;

        @include media-breakpoint-up( sm ) {
          max-width: 180px;
        }

        @include media-breakpoint-up( md ) {
          max-width: 140px;
        }

        @include media-breakpoint-up( lg ) {
          max-width: 200px;
        }

        @include media-breakpoint-up( xl ) {
          max-width: 280px;
        }

        span {
          @include a-fontSize18;
          @include a-fontLight;
          overflow: hidden !important;
          color: $white;
          text-overflow: ellipsis;
          text-transform: lowercase;

          @include media-breakpoint-up( sm ) {
            @include a-fontSize24;
          }
        }
      }
    }


    @include media-breakpoint-up(md) {
      .a-hvr-underline {
        &:hover {
          border-color: $white;
        }
      }
    }

    .a-personSwitcher {
      right: 82px;
      margin-top: -7px;

      @include media-breakpoint-up( sm ) {
        margin-top: -13px;
      }

      @include media-breakpoint-up( md ) {
        right: 0;
      }
    }

    .a-dropdown-personswitchList {
      z-index: 99999;

      &.a-dropdownTriangle {
        &::after {
          right: 82px;

          @include media-breakpoint-up( md ) {
            right: 3px;
          }
        }
      }
    }

    .a-personSwitcher,
    .a-personSwitcher-icon {
      color: $white;
    }

    .nav-pills {
      .nav-item {
        &.show {
          .nav-link {
            &.a-personSwitcher {
              color: $white;
            }
          }
        }
      }
    }

    .a-personSwitcher-name {
      @include media-breakpoint-down(md) {
        max-width: 68px;
      }
    }

    .a-header-options  {
      .nav-link {
        &:focus,
        &:active {
          color: $white;
          border-color: $white;
        }
      }
    }

    .a-globalNav {
      .navbar-toggler {
        color: $white;
        border-color: $white;
      }
    }
  }

  // Container that is wider for dashboard
  .an-dashboard-container {

    @include media-breakpoint-up(lg) {
      margin-right: -$spacer * 4;
      margin-left: -$spacer * 4;
    }

    @include media-breakpoint-up(xl) {
      margin-right: -$spacer * 5;
      margin-left: -$spacer * 5;
    }

    @include media-breakpoint-up(xxl) {
      margin-right: -$spacer * 9;
      margin-left: -$spacer * 9;
    }

    .a-btn-transparentWhite {
      .a-btn-icon-text {
        @include media-breakpoint-up(lg) {
          padding-left: 15px;
        }
      }
    }
  }

  // Calendar ajustments
  .an-arrangement-block-text {
    padding: 15px 30px;
  }

  .an-arrangement-block-inner {
    margin-right: 0;
  }

  // Resources adjustments
  .an-dashboard-resources {
    .a-list {
      &.a-list-large {
        li {
          .a-list-rowLink {
            @include a-fontSize16;
            padding: $spacer $spacer * 0.5;
          }

          &.a-list-hasRowLink {
            a {
              &[href^='http'] {
                &::after {
                  display: none;
                }
              }
            }
          }
        }
      }
    }
  }

  // Messages
  .an-prevMsg {
    display: flex;
    padding: $spacer;
    margin-top: -1px;
    color: $grey;
    background: $grey-lighter;
    border-top: 1px solid $black-opacity-01;
    border-bottom: none;

    &[aria-expanded='true'] {
      @include a-fontMedium;
      color: $black;
    }

    &:hover,
    &:focus,
    &:active {
      color: $black;
      border-top: 1px solid $black-opacity-01;
      border-bottom: none;
    }

    .a-dropdownArrow {
      margin-right: 9px;
    }

    .a-label {
      min-width: 25px;
      height: 25px;
      margin-top: -4px;
      margin-right: 0;
      margin-left: 12px;
    }
  }

  // Services
  .an-dashboard-services {
    .a-collapsePanel {
      box-shadow: $shadow2;

      &.expanded {
        padding-bottom: 0;
      }

      .a-collapsePanel-heading {
        box-shadow: none;
      }

      .a-collapsePanel-body {
        box-shadow: none;

        p {
          @include a-fontSize16;
        }

        &.a-msg-body {
          .a-collapsePanel-body-content {
            padding: $spacer * 2 $spacer * 4;
          }
        }
      }
    }

    .a-text {
      .a-list-container {
        max-width: none;
      }
    }

    .an-serviceEdition {
      @extend .an-prevMsg;
      color: $black;
      background: $white;

      .a-dropdownArrow {
        margin-right: $spacer;
      }
    }

    .an-serviceedition-body {
      .a-list {
        li > {
          .row {
            padding: 6px 6px 4px 0;
          }
        }
      }
    }

    .a-msgHeadingTextContainer {
      padding-left: $spacer * 4;
    }
  }

  // Modal adjustments

  .modal-backdrop {
    background-color: $blue-dark;
  }

  .a-modal {
    .a-form-group {
      @include media-breakpoint-up( sm ) {
        max-width: 500px;
      }
      margin-bottom: $spacer * 2;

      .a-form-group {
        margin-bottom: inherit;
      }
    }
  }

  .a-modal-top {
    .a-logo {
      width: 110px;
      margin-top: -1px;
      margin-right: 3px;
      @include media-breakpoint-up( sm ) {
        margin-top: 4px;
      }
    }

    .an-logotext {
      @include a-fontSize18;
      @include a-fontLight;
      color: $white;
      text-transform: lowercase;

      @include media-breakpoint-up( sm ) {
        @include a-fontSize24;
      }
    }

    .a-modal-top-user {
      display: none;
      @include media-breakpoint-up( md ) {
        display: block;
      }

      .a-personSwitcher {
        color: $white;
      }

      .a-personSwitcher-icon {
        color: $white;
      }
    }
  }

  &.a-modal-background-success {
    .modal-backdrop {
      background-color: $green-light;
    }

    .a-modal-top {
      .a-logo {
        &.a-modal-top-logo {
          filter: invert(1);
        }
      }

      .an-logotext {
        color: $black;
      }

      .a-modal-top-user {
        .a-personSwitcher {
          color: $black;
        }

        .a-personSwitcher-icon {
          color: $black;
        }
      }
    }
  }

  &.a-modal-background-error {
    .modal-backdrop {
      background-color: $red-light;
    }

    .a-modal-top {
      .a-logo {
        &.a-modal-top-logo {
          filter: invert(1);
        }
      }

      .an-logotext {
        color: $black;
      }

      .a-modal-top-user {
        .a-personSwitcher {
          color: $black;
        }

        .a-personSwitcher-icon {
          color: $black;
        }
      }
    }
  }
}

// Form adjustments - Make legend look like label on altinndigital and dashboard

.form-group {
  .a-legend {
    @include a-fontSize16;
    color: $black;
  }
}

.a-custom-radio {
  .custom-control-label {
    @include a-fontSize16
  }
}


// Make label blue immediately when click
.switch-container {
  .radio {
    input {
      &[type='radio'] {
        &:checked {
          &+label {
            background-color: $blue !important;
          }
        }
      }
    }
  }
}

// Fix for datepicker when not valid
.a-form-group-datepicker {
  &.has-error {
    .input-group {
      .input-group-prepend {
        // sass-lint:disable-block no-important
        border-right: 2px solid $red !important;
        border-left: none !important;
      }
    }
  }
}