@import './theme/default';
@import './theme/font';

.zent-split-button {
  display: inline-block;

  & + .zent-split-button {
    margin-left: 10px;
  }

  &__main {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;

    &.zent-btn-loading {
      &:hover,
      &:active {
        z-index: 0;
      }
    }

    &.zent-btn-primary {
      @include theme-color(border-right-color, primary, 6);
    }

    &.zent-btn-danger {
      @include theme-color(border-right-color, error, 4);
    }

    &.zent-btn-success {
      @include theme-color(border-right-color, success, 4);
    }

    &.zent-btn-text {
      border-right-width: 1px;
      border-right-style: solid;
      @include theme-color(border-right-color, stroke, 9);
    }

    &.zent-btn-disabled {
      @include theme-color(border-right-color, stroke, 8);
    }
  }

  &__main,
  &__dropdown-wrapper {
    position: relative;
    z-index: 1;

    &:hover {
      z-index: 2;
    }
  }

  &__dropdown-wrapper {
    margin-left: 1px;
    display: inline-block;
    &-text {
      margin-left: 0;
    }
  }

  &__dropdown {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding: 0;

    &-icononly {
      border-top-left-radius: 2px;
      border-bottom-left-radius: 2px;
    }

    &-icon.zenticon.zenticon-down {
      margin-left: 6px;
      margin-right: 6px;
    }

    &.zent-btn-primary {
      @include theme-color(border-left-color, primary, 6);
    }

    &.zent-btn-danger {
      @include theme-color(border-left-color, error, 4);
    }

    &.zent-btn-success {
      @include theme-color(border-left-color, success, 4);
    }

    &.zent-btn-text {
      .zent-split-button__dropdown-icon {
        margin-left: 4px;
        margin-right: 4px;
        font-size: $font-size-normal;
      }
    }

    &.zent-btn-disabled {
      @include theme-color(border-left-color, stroke, 8);
    }

    &-disabled {
      cursor: not-allowed;
    }
  }
}

.zent-split-button__dropdown-menu {
  display: inline-block;
  width: unset;
  .zent-menu-item {
    padding: 0 16px;
    &:hover {
      @include theme-color(background-color, stroke, 8);
    }
  }
  &-item-text.zent-menu-item {
    padding: 0 8px;
  }
}