@import '../style/theme/color';
@import '../style/theme/shadow';
@import '../style/theme/corner';
@import '../style/core/_font';

.devui-option-modal {
  position: relative;

  &-body {
    height: 550px;
    display: flex;

    .devui-option-modal-selected-col {
      flex: 1;
      padding: 20px;
      overflow-y: auto;

      d-checkbox {
        display: inline-block;
        width: 30%;
        height: 36px;
        margin-right: 8px;

        &::ng-deep label {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }

    .devui-option-modal-style {
      width: 280px;
      background: $devui-global-bg;
      border-radius: 0 $devui-border-radius-card 0 0;
    }

    .devui-option-title {
      font-size: $devui-font-size-card-title;
      color: $devui-text;
      font-weight: bold;
      margin-bottom: 16px;
    }

    .devui-option-subtitle {
      color: $devui-text;
      font-size: $devui-font-size;
      font-weight: bold;
      margin-bottom: 12px;
    }
  }

  &-footer {
    height: 72px;
    text-align: center;
    padding: 16px 0;
    position: relative;

    &::before {
      content: '';
      width: 100%;
      height: 20px;
      opacity: 0.04;
      position: absolute;
      top: -20px;
      left: 0;
      background-image: linear-gradient(180deg, transparent, $devui-base-bg-dark);
    }
  }

  .devui-option-panel {
    padding-bottom: 0;
    height: 100%;
    flex-direction: column;
    display: flex;

    .devui-option-panel-col-drag {
      flex: 1;
      overflow: hidden;
      scrollbar-gutter: stable;

      &:hover {
        overflow-y: auto;
      }
    }
  }

  .disabled {
    color: $devui-disabled-text;
  }
}
