// scss-lint:disable SelectorDepth, NestingDepth, ImportantRule

@import "constants";

.sci-dropdown {
  [data-toggle="dropdown"] {
    &:focus {
      box-shadow: none;
    }

    .caret {
      margin: 8px 0 8px 8px;
    }
  }

  &.open {
    [data-toggle="dropdown"] {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      border-color: $brand-focus;

      .caret {
        transform: rotateX(180deg);
      }
    }

    .dropdown-menu {
      @include font-button;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      box-shadow: $flyout-shadow;
      margin-top: -1px;
      width: 100%;

      li:hover {
        background: $color-concrete;
      }
    }
  }
}

.dropdown-menu {
  .form-dropdown-break hr {
    margin-top: 0;
    margin-bottom: 8px;
  }

  .form-dropdown-item {
    padding: 0 !important;

    button, .form-dropdown-item-info {
      border-radius: 0;
      padding-left: .9em;
      text-align: left;
      width: 100%;
    }

    button {
      color: $color-black !important;
    }

    .form-dropdown-item-info {
      color: $color-silver-chalice !important;
    }

    .project-archive-restore-form {
      .button-to {
        &:hover {
          background-color: $color-dd-hover !important;
        }
      }
    }

    .change-projects-view-type-form,
    .change-experiments-view-type-form {
      .button-to {
        float: unset !important;
        height: 48px;
        margin: 0;

        &:active {
          background-color: inherit;
        }

        &.selected::after {
          @include font-awesome;
          content: $font-fas-check;
          float: right;
        }
      }
    }
  }
}