@import "config.less";

@todons-selected-color: #d9931a;
@todons-selected-color-disabled: #999999;

@colorpalette-choice-total-width:  54 * @unit_base;
@colorpalette-choice-total-height: 54 * @unit_base;
@colorpalette-item-border-width:  4 * @unit_base;
@colorpalette-item-border-color: #c0c0c0;
@colorpalette-preview-total-width:  304 * @unit_base;
@colorpalette-preview-total-height: 109 * @unit_base;

@colorpalette-choice-actual-width:  @colorpalette-choice-total-width  - 2 * @colorpalette-item-border-width;
@colorpalette-choice-actual-height: @colorpalette-choice-total-height - 2 * @colorpalette-item-border-width;
@colorpalette-preview-actual-width:  @colorpalette-preview-total-width  - 2 * @colorpalette-item-border-width;
@colorpalette-preview-actual-height: @colorpalette-preview-total-height - 2 * @colorpalette-item-border-width;

.todons-colorpalette-disabled {
    .colorpalette-table {
        .colorpalette-choice-active {
            border-color: @todons-selected-color-disabled !important;
        }
    }
}

.ui-colorpalette {
  display: table;
    padding-left:   24 * @unit_base;
    padding-right:  24 * @unit_base;
    padding-top:    15 * @unit_base;
    padding-bottom: 15 * @unit_base;

  .colorpalette-preview-container {
        padding-top: 48 * @unit_base;
        padding-bottom: 39 * @unit_base;
    display: table;
    margin: auto;

    .colorpalette-preview {
      display: table;
      margin: auto;
      width:  @colorpalette-preview-actual-width;
      height: @colorpalette-preview-actual-height;
      border: @colorpalette-item-border-color @colorpalette-item-border-width solid;
    }
  }

  .colorpalette-table {
    .colorpalette-bottom-row {
      display: table-row;
    }

    .colorpalette-normal-row {
      .colorpalette-bottom-row;
    }

    .colorpalette-choice-container-left {
      display: table-cell;
    }

    .colorpalette-choice-container-rest {
      .colorpalette-choice-container-left;
            padding-left: 38 * @unit_base;
    }

    .colorpalette-normal-row .colorpalette-choice-container-left {
            padding-bottom: 16 * @unit_base;
    }

    .colorpalette-choice {
      width:      @colorpalette-choice-actual-width;
      height:     @colorpalette-choice-actual-width;
      border-width: @colorpalette-item-border-width;
      border-style: solid;
      border-color: @colorpalette-item-border-color;
	-moz-border-radius: 0.2em;
	-webkit-border-radius: 0.2em;
	bordert-radius: 0.2em;
    }

    .colorpalette-choice-active {
            border-color: @todons-selected-color;
    }
  }
	.LESSpalette_background_style;
}

label.colorpickerbutton_label.ui-input-text {
	display:block !important;
}