@import "../themes";

@mixin generate-ng-select($themes: $themes) {
  @each $theme, $map in $themes {
    $ng-select: map-get($map, ng-select);
    $input: map-get($map, input);
    $input-select: map-get($map, input-select);
    $input-highlight: map-get($map, input-highlight);

    .#{$theme}-theme ng-select {
      > div {
        min-height: map-get($input-select, height);
        line-height: map-get($input-select, height);
        background-color: map-get($input, background-color);
        color: map-get($input, color);
        border: 1px solid map-get($ng-select, border-color);

        &.highlight {
          height: map-get($input-highlight, height);
          line-height: map-get($input-highlight, height);
          background-color: map-get($input-highlight, background-color);
        }
        &:hover {
          border: 1px solid map-get($ng-select, hover-border-color);
        }

        &.focus {
          border: 1px solid map-get($ng-select, focus-border-color);
        }

        .ng-dropdown-panel, .ng-dropdown-panel.ng-select-bottom {
          border: 1.3px solid map-get($ng-select, border-color);
        }

        &.ng-select-container {
          border: 1.3px solid map-get($ng-select, border-color);

          &:hover {
            border: 1.3px solid map-get($ng-select, hover-border-color);

          }
        }

        > div.multiple {

          > div.option {
            background-color: map-get($ng-select, option-bg);
          }
        }
      }
      &.ng-select-focused > .ng-select-container{
        border-color: map-get($ng-select, focus-border-color) !important;
        box-shadow: none !important;
      }
    }

  }
}

@mixin generate-ng-select-dropdown($themes: $themes) {
  @each $theme, $map in $themes {
    $ng-select: map-get($map, ng-select);
    $input-select: map-get($map, input-select);
    $input-highlight: map-get($map, input-highlight);

    .#{$theme}-theme select-dropdown {
      > div {
        background-color: map-get($ng-select, option-bg);
        color: map-get($ng-select, option-color);
      }

      .selected {
        background-color: map-get($ng-select, option-hover-bg);

        &.highlighted {
          background-color: map-get($ng-select, option-hover-bg);
          color: map-get($ng-select, map-get($ng-select, option-hover-color));
        }
      }

      .highlighted {
        background-color: map-get($ng-select, option-hover-bg);
        color: map-get($ng-select, map-get($ng-select, option-hover-color));
      }

      .create-new-entry {
        font-style: italic;
        //color: #3d3d3d;

        &.highlighted {
          color: map-get($ng-select, map-get($ng-select, option-hover-color));
        }

        &:hover {
          background-color: map-get($ng-select, option-highlighted-bg);
          color: map-get($ng-select, map-get($ng-select, option-hover-color));
        }
      }
      .options {
        ul {
          li {
            height: map-get($input-select, height);
            line-height: map-get($input-select, height);
          }
        }
      }
      .highlight {
        .options {
          ul {

            li {
              height: map-get($input-highlight, height);
              line-height: map-get($input-highlight, height);
            }
          }
        }
      }

    }
  }
}
