@import "../../../themes/default";

:global {
  .app-dropdown {
    position: relative;
  }

  .app-dropdown-overlay {
    position: absolute;
    right: 0;
    background-color: @color-white;
    color: @color-black;
    border-radius: @border-radius-base;
    min-width: 120px;
    padding: 6px 0;
    z-index: 12;

    &:before {
      content: "";
      position: absolute;
      top: -14px;
      right: 0;
      width: 100%;
      height: 14px;
      background-color: transparent;
    }

    &:after {
      content: "";
      position: absolute;
      top: -14px;
      right: 24px;
      width: 0;
      height: 0;
      border: 7px solid transparent;
      border-bottom-color: @color-white;
    }

    ul {
      li {
        padding: 0 12px;
        line-height: 32px;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        white-space: normal;

        a {
          color: @color-black;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
        }

        &:hover, a:hover {
          color: @color-base;
        }
      }

      li.active, li.active a {
        color: @color-base;
      }
    }
  }

  .app-dropdown-trigger {
    cursor: pointer;
  }

  .app-dropdown-bordered {
    .app-dropdown-trigger {
      border: 1px solid @color-white;
      padding: 2px 12px;
      font-size: @font-size-base;

      > div {
        display: inline-block;
      }
    }

    .app-dropdown-arrow {
      padding-left: 12px;
    }
  }

  .app-dropdown-bottomLeft {
    .app-dropdown-overlay {
      top: 36px;
      left: 0;

      &:after {
        left: 24px;
        right: auto;
      }
    }
  }

  .app-dropdown-bottomCenter {
    .app-dropdown-overlay {
      left: 0;
      right: 0;
      margin: auto;

      &:after {
        left: 0;
        right: 0;
        margin: auto;
      }
    }
  }

  .app-dropdown-bottomRight {
    .app-dropdown-overlay {
      right: 0;
    }
  }

  .app-dropdown-arrow {
    display: inline-block;
    vertical-align: middle;
    margin-left: 2px;

    svg {
      width: 20px;

      path {
        fill: @color-white-65;
      }
    }
  }
}