@import '../variable.less';

.bixi-operations {
  display: flex;
  max-width: 100%;
  height: 100%;
  overflow-x: auto;
  line-height: 1;

  &-item {
    display: flex;
    align-items: center;
    height: 100%;
    cursor: pointer;
    user-select: none;

    &-disabled {
      color: @bixi-operations-item-disabled-color;
      cursor: not-allowed;
      pointer-events: none;
    }

    &-inner {
      display: flex;
      align-items: flex-start;
      padding: @bixi-operations-item-inner-padding;
      border-radius: @bixi-operations-item-border-radius;
      transition: background-color 0.15s linear;

      &:hover {
        background: @bixi-operations-item-hover-background;
      }

      &-active {
        background: @bixi-operations-item-active-background;

        &:hover {
          background: @bixi-operations-item-active-background;
        }
      }

      &-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 2px;
        font-size: @bixi-operations-item-inner-icon-font-size;

        svg {
          width: 1em;
          height: 1em;
        }

        &-dropdown {
          margin-left: 2px;
          font-size: 10px;
        }
      }

      &-text {
        margin: 2px;
        font-size: @bixi-operations-item-inner-text-font-size;
        white-space: nowrap;
      }

      &-vertical {
        display: flex;

        &-start {
          flex-direction: column;
        }

        &-end {
          flex-direction: column-reverse;
        }
      }

      &-horizontal {
        display: flex;
        align-items: center;

        &-start {
          flex-direction: row;
        }

        &-end {
          flex-direction: row-reverse;
        }

        &-text {
          margin: 2px;
          white-space: nowrap;
        }
      }
    }

    &-divider {
      width: @bixi-operations-item-divider-inner-width;
      height: @bixi-operations-item-divider-inner-height;
      background: @bixi-operations-item-divider-inner-background;

      &-short {
        height: @bixi-operations-item-divider-inner-height-short;
      }
    }

    &-dropdown-item {
      display: flex;
      align-items: center;

      &-icon {
        margin-right: @bixi-operations-item-child-icon-margin-right;

        svg {
          width: 1em;
          height: 1em;
        }
      }

      &:hover,
      &-active {
        background: @bixi-operations-item-hover-background;
      }
    }
  }
}