@import '../../style/themes/index';
@import '../../style/mixins/index';

@m-operations-prefix: m-operations;

.@{m-operations-prefix} {
  display: flex;
  height: 100%;
  overflow: hidden;
  line-height: 1;

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

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

      .anticon-caret-down {
        color: @operations-item-diabled-color;
      }
    }

    &-inner {
      display: flex;
      align-items: flex-start;
      padding: @operations-item-inner-padding;
      margin: @operations-item-inner-margin;

      .icon,
      .icon-right {
        font-size: @operations-item-inner-icon-font-size;
      }

      .text {
        margin-top: @operations-item-inner-icon-margin-bottom;
        font-size: @operations-item-inner-text-font-size;
      }

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

        .text {
          margin: 0 4px;
          white-space: nowrap;
        }
      }

      &:hover,
      &:hover nz-cascader,
      &-active {
        background: @operations-item-hover-background;
        border-radius: @operations-item-hover-border-radius;
      }

      .anticon-caret-down {
        font-size: @operations-item-inner-anticon-font-size;
        color: @operations-item-inner-anticon-color;
        vertical-align: baseline;
      }
    }

    &-divider {
      display: flex;
      align-items: center;
      margin-right: @operations-item-divider-margin-right;
    }

    &-divider-inner {
      width: @operations-item-divider-inner-width;
      height: 50%;
      background: @operations-item-divider-inner-background;
    }

    &-dropdown-item {
      display: flex;
      align-items: center;
      &:hover,
      &-active {
        background: @operations-item-hover-background;
        border-radius: @operations-item-hover-border-radius;
      }
    }

    &-cascader {
      .ant-cascader-menu {
        width: 168px;
        height: 200px;
      }

      .ant-cascader-menu-item {
        display: flex;
        height: 32px;
        line-height: 32px;
        .ant-cascader-menu-item-expand-icon {
          top: 0;
          font-size: 14px;
        }
      }

      &-template {
        display: flex;
        align-items: center;
        width: 100%;
        img {
          height: 32px;
          margin-right: 8px;
          overflow: hidden;
        }

        span {
          display: block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      &-thumbnail {
        width: 400px;
        height: 500px;
        overflow: auto;
        img {
          width: 100%;
        }
      }
    }
  }
}

.@{m-operations-prefix}-label-zoom {
  display: inline-block;
  vertical-align: middle;

  .m-operations-zoom {
    display: flex;
    align-items: center;
    text-align: right;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    &-slider {
      width: @operations-zoom-footer-slider-width;

      .ant-slider {
        .ant-slider-rail {
          background-color: #d8d8d8;
        }

        .ant-slider-track {
          background-color: #595959;
        }

        .ant-slider-handle {
          border-color: #d8d8d8;

          &:focus {
            box-shadow: none;
          }
        }
      }
    }

    &-drop-btn {
      width: @operations-zoom-drop-btn-width;
      height: @operations-zoom-drop-btn-height;
      font-size: @operations-zoom-drop-btn-font-size;
      line-height: @operations-zoom-drop-btn-line-height;
      cursor: pointer;
      border: @operations-zoom-drop-btn-border;
    }

    .anticon {
      padding: @operations-antion-padding;
      color: @operations-antion-color;
      cursor: pointer;
    }

    .disable {
      color: @operations-disable-color;
      pointer-events: none;
    }
  }
}

.@{m-operations-prefix}-zoom-dropdown {
  .ant-dropdown-menu-item {
    padding: @operations-dropdown-padding;
  }

  .active {
    color: @operations-dropdown-active-color;
  }

  .indent {
    display: inline-block;
    width: @operations-dropdown-indent-width;
  }
}

.@{m-operations-prefix}-label-pagination {
  display: flex;
  align-items: center;
  font-weight: @operations-label-font-weight;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  &-input-box {
    width: @operations-label-input-box-width;
    height: @operations-label-input-box-height;
    padding-right: @operations-label-input-box-padding-right;
    text-align: center;
    border: @operations-label-input-box-border;
    border-radius: @operations-label-input-box-border-radius;

    &-page {
      height: @operations-label-input-box-page-height;
      padding: @operations-label-input-box-page-padding;
      line-height: @operations-label-input-box-page-line-height;
    }

    &-current {
      width: @operations-label-input-box-current-width;
      text-align: right;
      background: transparent;
      border: none;
      outline: none;
    }

    &-total {
      color: @operations-label-input-box-total-color;
    }
  }

  &-border-bottom {
    width: @operations-label-input-box-current-width + 5;
    text-align: center;
    border-bottom: @operations-label-input-box-border;
  }

  .anticon {
    padding: @operations-antion-padding;
    color: @operations-antion-color;
    cursor: pointer;
  }

  .disabled {
    color: @operations-disable-color;
    pointer-events: none;
  }
}

.@{m-operations-prefix}-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 500;
  width: 100%;
  height: 100%;
}