@import 'variables';
@import 'theme-colors';

.dropdown {
  &.actions-dropdown {
    .btn-option {
      padding: 0;
      width: 28px;
      height: 28px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      color: $brand-color;

      svg {
        width: 13px;
        height: 13px;
      }

      &:hover {
        background-color: var(--icon-hover-bg);
      }
    }
  }
}

.dropdown-toggle {
  &:before, &:after {
    border: 0 !important;
    display: inline-block !important;
    vertical-align: inherit !important;
    font: normal normal 700 $dropdown-arrow-font-size/1 'Font Awesome 5 Free';
    transition: all $default-transition-duration $action-transition-timing-function;
  }

  &:after {
    content: '\f078' !important;
  }

  &[aria-expanded="true"] {
    &:before, &:after {
      transform: rotate(180deg);
    }
  }
}

.dropdown-menu {
  border: 0;
  left: inherit;
  font-size: $default-font-size;
  color: var(--default-font-color);
  box-shadow: var(--default-box-shadow);
  background-color: var(--dropdown-menu-bg);

  .dropdown-divider {
    margin: 0;
    border-color: var(--default-border-color);
  }

  .dropdown-item {
    font-size: inherit;
    padding: 0.6rem 1.5rem;
    color: var(--default-font-color);
    transition: $default-transition-duration $action-transition-timing-function;

    &:active {
      background: initial;
    }

    &:hover, &:focus {
      color: $brand-color;
      background-color: var(--base-color);
    }
  }

  &.dropdown-menu-center {
    top: 100% !important;
    right: auto !important;
    left: 50% !important;
    transform: translate(-50%, 0) !important;
    -o-transform: translate(-50%, 0) !important;
    -webkit-transform: translate(-50%, 0) !important;
  }
}

.dropleft {
  .dropdown-toggle {
    &:before {
      content: '\f053' !important;
    }

    &:after {
      display: none !important;
    }
  }
}

.dropright {
  .dropdown-toggle {
    &:after {
      content: '\f054' !important;
    }
  }
}

// Animation
.dropdown-with-animation {
  .dropdown-menu {
    @extend .dropdownAnimation;

    &.show {
      top: 100% !important;
    }

    &[x-placement^="left"],
    &[x-placement^="right"],
    &[x-placement^="top"] {
      top: auto !important;
      -webkit-animation: none !important;
      animation: none !important;
    }

    &[x-placement^="bottom-start"] {
      margin-top: 7px !important;
    }

    &[x-placement^="top-start"] {
      top: 0 !important;
      margin-bottom: 7px !important;
    }
  }
}
