/* Colors for TTA
 * ========================== */

// Custom Color (driven by inline --vc-tta-color CSS variable)
// ------------------------
.vc_tta-make-colors-set-custom(~'vc_tta-color-custom');

// For the Tabs layout the shared panel-color mixin hard-codes a transparent
// panel-body so the surrounding panels container colour shows through. With a
// user-defined colour we want the body itself to render the matching colour
// (the light active tint for Classic/Modern, the picked colour for Flat) so
// the result does not depend on the container being visible. The `no-fill`
// option keeps the body transparent (matches the standard palette behaviour).
.vc_tta-color-custom:not(.vc_tta-o-no-fill) {
  &.vc_tta-style-classic,
  &.vc_tta-style-modern {
    &.vc_tta-tabs {
      .vc_non_responsive &,
      .vc_tta-o-non-responsive & {
        .vc_tta-panels .vc_tta-panel-body {
          border-color: color-mix(in srgb, var(--vc-tta-active-color, @vc_tta-common-border-color), #000 5%);
          background-color: var(--vc-tta-active-color, @vc_tta-common-background-color);
        }
      }
      @media (min-width: @vc_tta-breakpoint) {
        .vc_tta-panels .vc_tta-panel-body {
          border-color: color-mix(in srgb, var(--vc-tta-active-color, @vc_tta-common-border-color), #000 5%);
          background-color: var(--vc-tta-active-color, @vc_tta-common-background-color);
        }
      }
    }
  }

  &.vc_tta-style-flat {
    &.vc_tta-tabs {
      .vc_non_responsive &,
      .vc_tta-o-non-responsive & {
        .vc_tta-panels .vc_tta-panel-body {
          border-color: color-mix(in srgb, var(--vc-tta-active-color, var(--vc-tta-color)), #000 10%);
          background-color: var(--vc-tta-active-color, var(--vc-tta-color));
        }
      }
      @media (min-width: @vc_tta-breakpoint) {
        .vc_tta-panels .vc_tta-panel-body {
          border-color: color-mix(in srgb, var(--vc-tta-active-color, var(--vc-tta-color)), #000 10%);
          background-color: var(--vc-tta-active-color, var(--vc-tta-color));
        }
      }
    }
  }
}

.vc_tta-color-custom.vc_tta-accordion {
  @title:        ~"var(--vc-tta-title-color, #666)";
  @title-active: ~"var(--vc-tta-active-title-color, #666)";

  &.vc_tta-style-classic,
  &.vc_tta-style-modern,
  &.vc_tta-style-flat {
    .vc_tta-panel {
      .vc_tta-panel-title > a {
        color: @title;
      }

      &.vc_active .vc_tta-panel-title > a {
        color: @title-active;
      }
    }

    .vc_tta-controls-icon::before,
    .vc_tta-controls-icon::after {
      border-color: @title;
    }

    .vc_active .vc_tta-panel-heading .vc_tta-controls-icon::before,
    .vc_active .vc_tta-panel-heading .vc_tta-controls-icon::after {
      border-color: @title-active;
    }
  }

  &.vc_tta-style-outline {
    @outline: ~"var(--vc-tta-color, #EBEBEB)";

    .vc_tta-panel {
      .vc_tta-panel-heading {
        border-color: @outline;

        &:hover,
        &:focus {
          background-color: transparent;
        }
      }

      .vc_tta-panel-title > a {
        color: @title;

        &:hover {
          color: @title;
        }
      }

      &.vc_active {
        .vc_tta-panel-heading {
          border-color: @outline;
        }

        .vc_tta-panel-title > a {
          color: @title-active;
        }
      }

      .vc_tta-panel-body,
      .vc_tta-panel-body::before,
      .vc_tta-panel-body::after {
        border-color: @outline;
      }
    }

    .vc_tta-controls-icon::before,
    .vc_tta-controls-icon::after {
      border-color: @title;
    }

    .vc_tta-panel-heading:hover .vc_tta-controls-icon::before,
    .vc_tta-panel-heading:focus .vc_tta-controls-icon::before,
    .vc_tta-panel-heading:hover .vc_tta-controls-icon::after,
    .vc_tta-panel-heading:focus .vc_tta-controls-icon::after {
      border-color: @title;
    }

    .vc_active .vc_tta-panel-heading .vc_tta-controls-icon::before,
    .vc_active .vc_tta-panel-heading .vc_tta-controls-icon::after {
      border-color: @title-active;
    }
  }
}

// Blue Color
// ------------------------
.vc_tta-make-colors-set(~'vc_tta-color-blue';
@color:             @vc_tta-color-blue;
@background:        @vc_tta-color-blue-bg;
@background-border: @vc_tta-color-blue-bg-border;
@border:            @vc_tta-color-blue-border;
@text:              @vc_tta-color-blue-text;
@contrast:          @vc_tta-color-blue-contrast;
@content:           @vc_tta-color-blue-content;
);

// Turquoise Color
// ------------------------
.vc_tta-make-colors-set(~'vc_tta-color-turquoise';
@color:             @vc_tta-color-turquoise;
@background:        @vc_tta-color-turquoise-bg;
@background-border: @vc_tta-color-turquoise-bg-border;
@border:            @vc_tta-color-turquoise-border;
@text:              @vc_tta-color-turquoise-text;
@contrast:          @vc_tta-color-turquoise-contrast;
@content:           @vc_tta-color-turquoise-content;
);

// Pink Color
// ------------------------
.vc_tta-make-colors-set(~'vc_tta-color-pink';
@color:             @vc_tta-color-pink;
@background:        @vc_tta-color-pink-bg;
@background-border: @vc_tta-color-pink-bg-border;
@border:            @vc_tta-color-pink-border;
@text:              @vc_tta-color-pink-text;
@contrast:          @vc_tta-color-pink-contrast;
@content:           @vc_tta-color-pink-content;
);

// Violet Color
// ------------------------
.vc_tta-make-colors-set(~'vc_tta-color-violet';
@color:             @vc_tta-color-violet;
@background:        @vc_tta-color-violet-bg;
@background-border: @vc_tta-color-violet-bg-border;
@border:            @vc_tta-color-violet-border;
@text:              @vc_tta-color-violet-text;
@contrast:          @vc_tta-color-violet-contrast;
@content:           @vc_tta-color-violet-content;
);

// Peacoc Color
// ------------------------
.vc_tta-make-colors-set(~'vc_tta-color-peacoc';
@color:             @vc_tta-color-peacoc;
@background:        @vc_tta-color-peacoc-bg;
@background-border: @vc_tta-color-peacoc-bg-border;
@border:            @vc_tta-color-peacoc-border;
@text:              @vc_tta-color-peacoc-text;
@contrast:          @vc_tta-color-peacoc-contrast;
@content:           @vc_tta-color-peacoc-content;
);
// chino
.vc_tta-make-colors-set(~'vc_tta-color-chino';
@color:             @vc_tta-color-chino;
@background:        @vc_tta-color-chino-bg;
@background-border: @vc_tta-color-chino-bg-border;
@border:            @vc_tta-color-chino-border;
@text:              @vc_tta-color-chino-text;
@contrast:          @vc_tta-color-chino-contrast;
@content:           @vc_tta-color-chino-content;
);

// Mulled Wine Color
// ------------------------
.vc_tta-make-colors-set(~'vc_tta-color-mulled-wine';
@color:             @vc_tta-color-mulled-wine;
@background:        @vc_tta-color-mulled-wine-bg;
@background-border: @vc_tta-color-mulled-wine-bg-border;
@border:            @vc_tta-color-mulled-wine-border;
@text:              @vc_tta-color-mulled-wine-text;
@contrast:          @vc_tta-color-mulled-wine-contrast;
@content:           @vc_tta-color-mulled-wine-content;
);

// Vista Blue Color
// ------------------------
.vc_tta-make-colors-set(~'vc_tta-color-vista-blue';
@color:             @vc_tta-color-vista-blue;
@background:        @vc_tta-color-vista-blue-bg;
@background-border: @vc_tta-color-vista-blue-bg-border;
@border:            @vc_tta-color-vista-blue-border;
@text:              @vc_tta-color-vista-blue-text;
@contrast:          @vc_tta-color-vista-blue-contrast;
@content:           @vc_tta-color-vista-blue-content;
);

// Orange Color
// ------------------------
.vc_tta-make-colors-set(~'vc_tta-color-orange';
@color:             @vc_tta-color-orange;
@background:        @vc_tta-color-orange-bg;
@background-border: @vc_tta-color-orange-bg-border;
@border:            @vc_tta-color-orange-border;
@text:              @vc_tta-color-orange-text;
@contrast:          @vc_tta-color-orange-contrast;
@content:           @vc_tta-color-orange-content;
);

// Sky Color
// ------------------------
.vc_tta-make-colors-set(~'vc_tta-color-sky';
@color:             @vc_tta-color-sky;
@background:        @vc_tta-color-sky-bg;
@background-border: @vc_tta-color-sky-bg-border;
@border:            @vc_tta-color-sky-border;
@text:              @vc_tta-color-sky-text;
@contrast:          @vc_tta-color-sky-contrast;
@content:           @vc_tta-color-sky-content;
);

// Green Color
// ------------------------
.vc_tta-make-colors-set(~'vc_tta-color-green';
@color:             @vc_tta-color-green;
@background:        @vc_tta-color-green-bg;
@background-border: @vc_tta-color-green-bg-border;
@border:            @vc_tta-color-green-border;
@text:              @vc_tta-color-green-text;
@contrast:          @vc_tta-color-green-contrast;
@content:           @vc_tta-color-green-content;
);

// Juicy Pink Color
// ------------------------
.vc_tta-make-colors-set(~'vc_tta-color-juicy-pink';
@color:             @vc_tta-color-juicy-pink;
@background:        @vc_tta-color-juicy-pink-bg;
@background-border: @vc_tta-color-juicy-pink-bg-border;
@border:            @vc_tta-color-juicy-pink-border;
@text:              @vc_tta-color-juicy-pink-text;
@contrast:          @vc_tta-color-juicy-pink-contrast;
@content:           @vc_tta-color-juicy-pink-content;
);

// Sandy Brown Color
// ------------------------
.vc_tta-make-colors-set(~'vc_tta-color-sandy-brown';
@color:             @vc_tta-color-sandy-brown;
@background:        @vc_tta-color-sandy-brown-bg;
@background-border: @vc_tta-color-sandy-brown-bg-border;
@border:            @vc_tta-color-sandy-brown-border;
@text:              @vc_tta-color-sandy-brown-text;
@contrast:          @vc_tta-color-sandy-brown-contrast;
@content:           @vc_tta-color-sandy-brown-content;
);

// Purple Color
// ------------------------
.vc_tta-make-colors-set(~'vc_tta-color-purple';
@color:             @vc_tta-color-purple;
@background:        @vc_tta-color-purple-bg;
@background-border: @vc_tta-color-purple-bg-border;
@border:            @vc_tta-color-purple-border;
@text:              @vc_tta-color-purple-text;
@contrast:          @vc_tta-color-purple-contrast;
@content:           @vc_tta-color-purple-content;
);

// Black Color
// ------------------------
.vc_tta-make-colors-set(~'vc_tta-color-black';
@color:             @vc_tta-color-black;
@background:        @vc_tta-color-black-bg;
@background-border: @vc_tta-color-black-bg-border;
@border:            @vc_tta-color-black-border;
@text:              @vc_tta-color-black-text;
@contrast:          @vc_tta-color-black-contrast;
@content:           @vc_tta-color-black-content;
);

// Grey Color
// ------------------------
.vc_tta-color-grey {
  // Classic Style
  // ------------------------
  &.vc_tta-style-classic {
    .vc_tta-make-panel-color(
    @border: @vc_tta-common-border-color;
    @border-active: @vc_tta-common-border-color;
    @background: @vc_tta-common-background-color;
    @background-active: @vc_tta-common-background-color;
    @text: @vc_tta-color-grey-contrast;
    @text-active: @vc_tta-color-grey-text;
    );
    .vc_tta-make-tabs-color(
    @border: @vc_tta-color-grey-border;
    @border-active: @vc_tta-color-grey-bg-border;
    @background: @vc_tta-color-grey;
    @background-active: @vc_tta-color-grey-bg;
    @text: @vc_tta-color-grey-contrast;
    @text-active: @vc_tta-color-grey-text;
    );
  }

  // Modern Style
  // ------------------------
  &.vc_tta-style-modern {
    .vc_tta-make-panel-color(
    @border: @vc_tta-common-border-color;
    @border-active: @vc_tta-common-border-color;
    @background: @vc_tta-common-background-color;
    @background-active: @vc_tta-common-background-color;
    @text: @vc_tta-color-grey-contrast;
    @text-active: @vc_tta-color-grey-text;
    );
    .vc_tta-make-tabs-color(
    @border: @vc_tta-color-grey-border;
    @border-active: @vc_tta-color-grey-bg-border;
    @background: @vc_tta-color-grey;
    @background-active: @vc_tta-color-grey-bg;
    @text: @vc_tta-color-grey-contrast;
    @text-active: @vc_tta-color-grey-text;
    );
  }

  // Outline Style
  // ------------------------
  &.vc_tta-style-outline {
    .vc_tta-make-panel-color(
    @text: @vc_tta-color-grey;
    @text-hover: @vc_tta-color-grey-contrast;
    @text-active: @vc_tta-color-grey;
    @border: @vc_tta-color-grey-border;
    @border-active: @vc_tta-color-grey;
    @background: transparent;
    @background-active: transparent;
    @background-hover: @vc_tta-color-grey;
    );
    .vc_tta-make-tabs-color(
    @text: @vc_tta-color-grey;
    @text-hover: @vc_tta-color-grey-contrast;
    @text-active: @vc_tta-color-grey;
    @border: @vc_tta-color-grey-border;
    @border-active: @vc_tta-color-grey;
    @background: transparent;
    @background-active: transparent;
    @background-hover: @vc_tta-color-grey;
    );
  }

  // Flat Style
  // ------------------------
  &.vc_tta-style-flat {
    .vc_tta-make-panel-color(
    @background: @vc_tta-common-background-color;
    @background-active: @vc_tta-common-background-color;
    @text: @vc_tta-color-grey-contrast;
    @text-active: @vc_tta-color-grey-contrast;
    @content-color: @vc_tta-color-grey-contrast;
    );
    .vc_tta-make-tabs-color(
    @background: darken(@vc_tta-color-grey, 3%);
    @background-active: @vc_tta-color-grey;
    @background-hover: darken(@vc_tta-color-grey, 6%);
    @text: @vc_tta-color-grey-contrast;
    @text-active: @vc_tta-color-grey-contrast;
    @content-color: @vc_tta-color-grey-contrast;
    );
  }
}

// White Color
// ------------------------
.vc_tta-color-white {
  // Classic Style
  // ------------------------
  &.vc_tta-style-classic {
    .vc_tta-make-panel-color(
    @border: @vc_tta-color-white-border;
    @border-active: @vc_tta-color-white-border;
    @background: @vc_tta-color-white;
    @background-active: @vc_tta-color-white;
    @text: @vc_tta-color-white-contrast;
    @text-active: @vc_tta-color-white-text;
    );
    .vc_tta-make-tabs-color(
    @border: @vc_tta-color-white-border;
    @border-active: @vc_tta-color-white-bg-border;
    @background: @vc_tta-color-white;
    @background-active: @vc_tta-color-white-bg;
    @text: @vc_tta-color-white-contrast;
    @text-active: @vc_tta-color-white-text;
    );
  }

  // Modern Style
  // ------------------------
  &.vc_tta-style-modern {
    .vc_tta-make-panel-color(
    @border: @vc_tta-color-white-border;
    @border-active: @vc_tta-color-white-border;
    @background: @vc_tta-color-white;
    @background-active: @vc_tta-color-white;
    @text: @vc_tta-color-white-contrast;
    @text-active: @vc_tta-color-white-text;
    );
    .vc_tta-make-tabs-color(
    @border: @vc_tta-color-white-border;
    @border-active: @vc_tta-color-white-bg-border;
    @background: @vc_tta-color-white;
    @background-active: @vc_tta-color-white-bg;
    @text: @vc_tta-color-white-contrast;
    @text-active: @vc_tta-color-white-text;
    );
  }

  // Outline Style
  // ------------------------
  &.vc_tta-style-outline {
    .vc_tta-make-panel-color(
    @text: @vc_tta-color-white;
    @text-hover: @vc_tta-color-white-contrast;
    @text-active: @vc_tta-color-white;
    @border: @vc_tta-color-white-border;
    @border-active: @vc_tta-color-white;
    @background: transparent;
    @background-active: transparent;
    @background-hover: @vc_tta-color-white;
    );
    .vc_tta-make-tabs-color(
    @text: @vc_tta-color-white;
    @text-hover: @vc_tta-color-white-contrast;
    @text-active: @vc_tta-color-white;
    @border: @vc_tta-color-white-border;
    @border-active: @vc_tta-color-white;
    @background: transparent;
    @background-active: transparent;
    @background-hover: @vc_tta-color-white;
    );
  }

  // Flat Style
  // ------------------------
  &.vc_tta-style-flat {
    .vc_tta-make-panel-color(
    @background: darken(@vc_tta-color-white, 2%);
    @background-active: @vc_tta-color-white;
    @background-hover: darken(@vc_tta-color-white, 5%);
    @text: @vc_tta-color-white-contrast;
    @text-active: @vc_tta-color-white-contrast;
    @content-color: @vc_tta-color-white-contrast;
    );
    .vc_tta-make-tabs-color(
    @background: darken(@vc_tta-color-white, 2%);
    @background-active: @vc_tta-color-white;
    @background-hover: darken(@vc_tta-color-white, 5%);
    @text: @vc_tta-color-white-contrast;
    @text-active: @vc_tta-color-white-contrast;
    @content-color: @vc_tta-color-white-contrast;
    );
  }
}
