@import "~cosmoUiVariables";
@import "../mixins/flex";
@import "../mixins/paddings";

//dropdown styles
$dropdown-item-bg: #eff0f2;
$dropdown-item-text: #555555;
$dropdown-item-hover-bg: #ffffff;
$dropdown-item-hover-text: #555555;

$dropdown-item-active-bg: #2794d0;
$dropdown-item-active-text: #ffffff;
$dropdown-item-active-hover-bg: #54b4e7;
$dropdown-item-active-hover-text: #ffffff;


$dropdown-background-transition: background 0.25s ease;
$dropdown-transition: all 0.25s ease;

// list styles
$dropdown-list-item-height: 45px;
$dropdown-list-item-padding-x: 12px;
$dropdown-list-border-radius: 4px;
$dropdown-list-box-shadow: 1px 1px 2px #ccc;

// list item styles
$dropdown-list-item-border: 1px solid #fff;

// icon styles
$dropdown-icon-spacing: 12px;

.container {
  @extend %row-center;
  height: 100%;
  width: 34px;
  position: relative; //the absolute list will be positioned against this
  button {
    cursor: pointer;
    border: none;
    padding: 0;
    color: $white;
    background-color: transparent;
    @extend %row-center;
  }
}

.list {
  position: absolute;
  transition: $dropdown-background-transition;
  padding: 0;
  top: 100%;
  right: 0;
  width: auto;
  white-space: nowrap;
  z-index: 10;
  border-radius: $dropdown-list-border-radius;
  border: none;
  box-shadow: $dropdown-list-box-shadow;
  list-style: none;
  padding: 0;
  margin: 0;
  display: block;
  //width: 180px;
  :first-child {
    border-top-left-radius: $dropdown-list-border-radius;
    border-top-right-radius: $dropdown-list-border-radius;
  }
  :last-child {
    border-bottom: none !important;
    border-bottom-left-radius: $dropdown-list-border-radius;
    border-bottom-right-radius: $dropdown-list-border-radius;
  }
}

.item {
  @extend %row;
  @include padding-x($dropdown-list-item-padding-x);
  cursor: pointer;
  width:100%;
  height: $dropdown-list-item-height;
  border-bottom: $dropdown-list-item-border;
  transition: $dropdown-transition;
  background-color: $dropdown-item-bg;
  color: $dropdown-item-text;
  svg {
      width: 20px;
      height: 20px;
      transition: $dropdown-transition;

      margin-right: $dropdown-icon-spacing;
      border: none;
      border-radius: 100%; // depracated - circular border
      use {
          --primary-color: $dropdown-item-text !important;
          --secondary-color: $dropdown-item-bg !important;
          --tertiary-color: $dropdown-item-text !important;
      }
  }

  &:hover {
    background-color: $dropdown-item-hover-bg;
    color: $dropdown-item-hover-text;
    svg {
        use {
            --primary-color: $dropdown-item-hover-text !important;;
            --secondary-color: $dropdown-item-hover-bg !important;;
            --tertiary-color: $dropdown-item-hover-text !important;;
        }
    }
  }
}

.active {
  background-color: $dropdown-item-active-bg;
  color: $dropdown-item-active-text;
  svg {
      use {
          --primary-color: $dropdown-item-active-text !important;
          --secondary-color: $dropdown-item-active-bg !important;
          --tertiary-color: $dropdown-item-active-text !important;
      }
  }
  &:hover {
      background-color: $dropdown-item-active-hover-bg;
      color: $dropdown-item-active-hover-text;
      svg {
          use {
              --primary-color: $dropdown-item-active-hover-text !important;
              --secondary-color: $dropdown-item-active-hover-bg !important;
              --tertiary-color: $dropdown-item-active-hover-text !important;
          }
      }
  }
}