/*********************************************************************************
* THEME MIXIN
*
* This mixin creates a set of styles to theme components.
* Call @include theme(propertyName) to create classes for propertyName--primary and
* propertyName--secondary
*
* Example: @include theme(background-color) will produce
* .background-color--primary
* .background-color--primary-dimmed
* .background-color--secondary
* With themes for all defined colors.
**********************************************************************************/
@use './_settings.colors' as *;

@mixin theme($property) {
  .#{$property}--primary {
    #{$property}: $primary-color--default;
    .theme--neutral & {
      #{$property}: $primary-color--default;
    }
    .theme--blue & {
      #{$property}: $primary-color--blue;
    }
    .theme--red & {
      #{$property}: $primary-color--red;
    }
    .theme--green & {
      #{$property}: $primary-color--green;
    }
    .theme--pinkie & {
      #{$property}: $primary-color--pinkie;
    }
    &.theme--neutral {
      #{$property}: $primary-color--default;
    }
    &.theme--blue {
      #{$property}: $primary-color--blue;
    }
    &.theme--red {
      #{$property}: $primary-color--red;
    }
    &.theme--green {
      #{$property}: $primary-color--green;
    }
    &.theme--pinkie {
      #{$property}: $primary-color--pinkie;
    }
  }
  .#{$property}--secondary {
    #{$property}: $secondary-color--default;
    .theme--neutral & {
      #{$property}: $secondary-color--default;
    }
    .theme--blue & {
      #{$property}: $secondary-color--blue;
    }
    .theme--red & {
      #{$property}: $secondary-color--red;
    }
    .theme--green & {
      #{$property}: $secondary-color--green;
    }
    .theme--pinkie & {
      #{$property}: $secondary-color--pinkie;
    }
    &.theme--neutral {
      #{$property}: $secondary-color--default;
    }
    &.theme--blue {
      #{$property}: $secondary-color--blue;
    }
    &.theme--red {
      #{$property}: $secondary-color--red;
    }
    &.theme--green {
      #{$property}: $secondary-color--green;
    }
    &.theme--pinkie {
      #{$property}: $secondary-color--pinkie;
    }
  }
  .#{$property}--primary-dimmed {
    #{$property}: $primary-color--default-dimmed;
    .theme--neutral & {
      #{$property}: $primary-color--default-dimmed;
    }
    .theme--blue & {
      #{$property}: $primary-color--blue-dimmed;
    }
    .theme--red & {
      #{$property}: $primary-color--red-dimmed;
    }
    .theme--green & {
      #{$property}: $primary-color--green-dimmed;
    }
    .theme--pinkie & {
      #{$property}: $primary-color--pinkie-dimmed;
    }
    &.theme--neutral {
      #{$property}: $primary-color--default-dimmed;
    }
    &.theme--blue {
      #{$property}: $primary-color--blue-dimmed;
    }
    &.theme--red {
      #{$property}: $primary-color--red-dimmed;
    }
    &.theme--green {
      #{$property}: $primary-color--green-dimmed;
    }
    &.theme--pinkie {
      #{$property}: $primary-color--pinkie-dimmed;
    }
  }
}

@include theme(border-top-color);
@include theme(border-left-color);
@include theme(border-right-color);
@include theme(border-bottom-color);
@include theme(border-color);
@include theme(color);
@include theme(background-color);