// placeholder
@import (optional, reference) '../../style/themes/index';

@color-picker-prefix-cls: ~'@{mega-prefix}-color-picker';
@color-panel-prefix-cls: ~'@{mega-prefix}-color-panel';

.@{color-picker-prefix-cls} {
  &-overlay {
    border-radius: 0;
    .ant-popover-message-title {
      padding-left: 0;
    }
    .mega-design-color-panel {
      border: 0;
    }
    .@{color-picker-prefix-cls}-operation {
      padding: 10px;
      text-align: right;
      border-top: 1px solid @btn-default-border;
      .cancel {
        padding: 0 7px;
        line-height: 24px;
        margin-right: 6px;
      }
    }
    .ant-popover-inner-content {
      padding: 0;
      .ant-popover-message {
        padding: 0;
      }
      .ant-popover-buttons {
        padding: 8px;
        margin-bottom: 0;
        border-top: 1px solid @input-border-color;
        .ant-btn:first-of-type {
          border-color: transparent;
          color: @primary-color;
        }
      }
    }
    .mega-design-color-panel {
      border-width: 0;
    }
  }
  &__trigger {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 40px;
    padding: 4px;
    border: 1px solid @btn-default-border;
    border-radius: 4px;
    text-align: center;
    line-height: 32px;
    cursor: pointer;
    .anticon {
      position: relative;
      z-index: 2;
    }
    .anticon-down {
      color: @text-color-inverse;
    }
    .anticon-close {
      color: @input-placeholder-color;
    }
    &.is_disabled {
      cursor: no-drop;
    }
  }
  &__color {
    position: absolute;
    left: 4px;
    top: 4px;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    border: 1px solid @text-color-secondary;
    border-radius: 2px;
    z-index: 0;
    &.is-alpha {
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
    }
    &-inner {
      width: 100%;
      height: 100%;
    }
  }
}