@import "../../../style/mixin";

@include export-module('cc-button-layout') {
  .co-button {
    font-family: $cc-btn-font-family;
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    flex-grow: 0;
    height: $cc-btn-height;
    border-radius: $cc-btn-border-radius;
    outline: none;
    z-index: 0; /* to keep ripple effect inside button */
    overflow: hidden;
    padding: $cc-btn-padding;
    font-size: $cc-btn-font-size;
    place-content: $cc-btn-place-content;
    pointer-events: all;

    &:not(.has-label) {
      padding: 0;
      width: auto;
      aspect-ratio: 1;
      justify-content: center;
    }

    .co-icon {
      height: $cc-btn-icon-size;
      width: auto;
      aspect-ratio: 1;
    }

    .label {
      margin: $cc-btn-label-margin;
    }

    &.has-left-icon.has-right-icon {
      justify-content: space-between;
    }

    &.has-right-icon {
      justify-content: space-between;
    }

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

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

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

    //&:not(.circle).has-icon {
    //  padding-left: 0;
    //}

    &.circle {
      padding: 0;
      border-radius: 50%;
      height: $cc-btn-height;
      width: $cc-btn-height;
    }

    &.disabled {
      filter: opacity(50%);
      pointer-events: none;
    }

    .rippler {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1;
    }

    &.save-button {
      height: $cc-dialog-btn-size;
      width: $cc-dialog-btn-size;
      border-color: $cc-dialog-btn-border-color;
      border-style: $cc-dialog-btn-border-style;
      border-width: $cc-dialog-btn-border-width;
      background-color: $cc-dialog-btn-background-color;
      padding: $cc-dialog-btn-padding;
      box-shadow: $cc-dialog-btn-box-shadow;
      cursor: pointer;
      .co-icon {
        height: $cc-dialog-btn-icon-size;
        width: $cc-dialog-btn-icon-size;
        svg {
          fill: $cc-dialog-btn-icon-color;
        }
      }
    }

    &.close-button, &.delete-button {
      height: $cc-dialog-btn-size;
      width: $cc-dialog-btn-size;
      border-color: $cc-dialog-btn-border-color;
      border-style: $cc-dialog-btn-border-style;
      border-width: $cc-dialog-btn-border-width;
      background-color: $cc-dialog-btn-close-background-color;
      padding: $cc-dialog-btn-padding;
      box-shadow: $cc-dialog-btn-box-shadow;
      cursor: pointer;
      .co-icon {
        height: $cc-dialog-btn-icon-size;
        width: $cc-dialog-btn-icon-size;
        svg {
          fill: $cc-dialog-btn-icon-color;
        }
        [fill] {
          fill: $cc-dialog-btn-icon-color;
        }
      }
    }

    &.bordered {
      height: $cc-dialog-btn-size;
      width: $cc-dialog-btn-size;
      border-color: $cc-dialog-btn-background-color;
      border-style: $cc-dialog-btn-border-style;
      border-width: 1px;
      background-color: transparent;
      padding: $cc-dialog-btn-padding;
      cursor: pointer;
      .co-icon {
        height: $cc-dialog-btn-icon-size;
        width: $cc-dialog-btn-icon-size;
        svg {
          fill: $cc-dialog-btn-background-color;
        }
      }

      &:hover {
        filter: none;
        background-color: $cc-dialog-btn-background-color;
        .co-icon svg {
          fill: $cc-dialog-btn-icon-color;
        }
      }
    }
  }
}
