@import '../../../styles/themes';
@import '~@nebular/theme/styles/core/mixins';
@import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/breakpoints';

$icon-color-default: #0bbb79;
$icon-color-cosmic: #7958fa;
$icon-color-corporate: #a7a2be;

$icon-top-color-default: #01dbb5;
$icon-top-color-cosmic: #a258fe;
$icon-top-color-corporate: #e9e8eb;

@include nb-install-component() {
  /deep/ .themes-switcher-list {
    padding: 1rem 2rem 1.25rem 0.5rem;
    margin: 0;

    @include nb-ltr(text-align, start);
    @include nb-rtl(text-align, end);

    .themes-switcher-item {
      list-style: none;
      cursor: pointer;

      &:hover span {
        opacity: 0.5;
      }

      i {
        font-size: 2rem;

        &.drop-icon-default {
          color: $icon-color-default;

          // Hack for IE11, IE11 should not set background
          background: -webkit-linear-gradient($icon-top-color-default, $icon-color-default);
        }

        &.drop-icon-cosmic {
          color: $icon-color-cosmic;

          // Hack for IE11, IE11 should not set background
          background: -webkit-linear-gradient($icon-top-color-cosmic, $icon-color-cosmic);
        }

        &.drop-icon-corporate {
          color: $icon-color-corporate;

          // Hack for IE11, IE11 should not set background
          background: -webkit-linear-gradient($icon-top-color-corporate, $icon-color-corporate);
        }

        &.drop-icon-default,
        &.drop-icon-cosmic,
        &.drop-icon-corporate {
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }

      span {
        font-weight: 300;
        vertical-align: super;
        padding-left: 1rem;
        color: nb-theme(color-fg-heading);
      }
    }
  }

  @include media-breakpoint-down(is) {
    /deep/ .themes-switcher-list {
      display: none;
    }
  }
}