@import "../../../style/mixin";
@import "./material-definition";

@include export-module('cc-button-theme') {
  %transparent-button {
    background-color: transparent;

    &:not(.disabled).action-hover {
      &:hover {
        color: $cc-btn-text-color;
        background-color: $cc-btn-color !important;
      }
    }
  }

  .co-button {
    color: $cc-btn-text-color;
    background-color: $cc-btn-color;

    &.toggled {
      background-color: $cc-color-active-accent;
    }

    &.white {
      background-color: $cc-btn-text-color;
      border: 1px solid $cc-color-border;
      color: $cc-btn-color-dark;

      ::ng-deep co-icon ::ng-deep [fill] {
        fill: $cc-btn-color-dark;
      }

      &.toggled {
        background-color: $cc-color-active-accent;
        border: 1px solid $cc-color-active-accent;
        color: white;

        ::ng-deep co-icon ::ng-deep [fill] {
          fill: $cc-btn-text-color;
        }
      }

      &:hover {
        background-color: $cc-btn-color;
        border: 1px solid $cc-btn-color;
        color: $cc-btn-text-color;

        ::ng-deep co-icon ::ng-deep [fill] {
          fill: $cc-btn-text-color;
        }
      }
    }

    &.smaller {
      transform: scale(0.8);
    }

    &.small {
      transform: scale(0.6);
    }

    &.mini {
      transform: scale(0.4);
    }

    &.disabled {
      filter: opacity(50%);
    }

    &.transparent {
      @extend %transparent-button;

      &:hover:not(.disabled):not(.no-hover) {
        ::ng-deep > co-icon [fill] {
          fill: $cc-btn-text-color;
        }
      }
    }
    &:hover {
      filter: brightness(75%);
    }
  }
}
