@import "../../../themes/core/colors";
@import "button-base";

/********** QMS BUTTON BASIC  **********/
.qms-btn {
  @include size-default;
  @include qms-btn(primary);

  &.qms-primary {
    @include qms-btn(primary);
  }

  &.qms-secondary {
    @include qms-btn(secondary);
  }
}

/********** QMS LARGE BUTTON BASIC  **********/
.qms-btn-lg {
  @include size-large;
  @include qms-btn(primary);

  &.qms-primary {
    @include qms-btn(primary);
  }

  &.qms-secondary {
    @include qms-btn(secondary);
  }
}

/********** QMS BUTTON OUTLINED **********/
.qms-btn-outlined {
  @include size-default;
  padding: 0 9px;
  @include qms-btn-outlined(primary);

  &.qms-primary {
    @include qms-btn-outlined(primary);
  }

  &.qms-secondary {
    @include qms-btn-outlined(secondary);
  }
}

/********** QMS BUTTON OUTLINED LARGE  **********/
.qms-btn-outlined-lg {
  @include size-large;
  padding: 4px 13px;
  @include qms-btn-outlined(primary);
  &.qms-primary {
    @include qms-btn-outlined(primary);
  }

  &.qms-secondary {
    @include qms-btn-outlined(secondary);
  }
}

/********** QMS BUTTON TEXT  **********/
.qms-btn-text {
  @include size-default;
  @include qms-btn-text(primary);

  &.qms-primary {
    @include qms-btn-text(primary);
  }

  &.qms-secondary {
    @include qms-btn-text(secondary);
  }
}

/********** QMS LARGE BUTTON TEXT  **********/
.qms-btn-text-lg {
  @include size-large;
  @include qms-btn-text(primary);

  &.qms-primary {
    @include qms-btn-text(primary);
  }

  &.qms-secondary {
    @include qms-btn-text(secondary);
  }
}

/********** QMS BUTTON FAB  **********/
.qms-btn-fab {
  @include fab($fab-size, $fab-padding);
  @include qms-btn(primary);
  &:not([disabled]):focus {
    &:not(:focus-visible) {
      box-shadow: 0px 8px 10px black(0.14), 0px 3px 14px black(0.12),
        0px 5px 5px black(0.2);
    }
  }

  &:not([disabled]):focus {
    box-shadow: 0 0 0 2px #8caad4,
    0px 8px 10px black(0.14), 0px 3px 14px black(0.12),
        0px 5px 5px black(0.2);
  }

  &.qms-primary {
    @include qms-btn(primary);
    &:not([disabled]):focus {
      &:not(:focus-visible) {
        box-shadow: 0px 8px 10px black(0.14), 0px 3px 14px black(0.12),
          0px 5px 5px black(0.2);
      }
    }

    &:not([disabled]):focus {
      box-shadow: 0 0 0 2px #8caad4,
      0px 8px 10px black(0.14), 0px 3px 14px black(0.12),
          0px 5px 5px black(0.2);
    }
  }

  &.qms-secondary {
    @include qms-btn(secondary);
    &:not([disabled]):focus {
      &:not(:focus-visible) {
        box-shadow: 0px 8px 10px black(0.14), 0px 3px 14px black(0.12),
          0px 5px 5px black(0.2);
      }
    }

    &:not([disabled]):focus {
      box-shadow: 0 0 0 2px #cf9b87,
      0px 8px 10px black(0.14), 0px 3px 14px black(0.12),
          0px 5px 5px black(0.2);
    }
  }
}

/********** QMS BUTTON FAB MINI  **********/
.qms-btn-fab-sm {
  @include fab($mini-fab-size, $mini-fab-padding);
  @extend .qms-btn-fab;
}

/********** QMS BUTTON FAB OUTLINED  **********/
.qms-btn-fab-outlined {
  @include fab($fab-size, $fab-padding);
  @include qms-btn-fab-outlined(primary);

  &.qms-primary {
    @include qms-btn-fab-outlined(primary);
  }

  &.qms-secondary {
    @include qms-btn-fab-outlined(secondary);
  }
}

/********** QMS BUTTON FAB OUTLINED MINI  **********/
.qms-btn-fab-outlined-sm {
  @include fab($mini-fab-size, $mini-fab-padding);
  @extend .qms-btn-fab-outlined;
}

/********** QMS BUTTON FAB EXTEND  **********/
.qms-btn-fab-ext {
  @include fab-ext();
  @include qms-btn(primary);

  &:not([disabled]):focus {
    &:not(:focus-visible) {
      box-shadow: 0px 8px 10px black(0.14), 0px 3px 14px black(0.12),
        0px 5px 5px black(0.2);
    }
  }

  &:not([disabled]):focus {
    box-shadow: 0 0 0 2px #8caad4,
    0px 8px 10px black(0.14), 0px 3px 14px black(0.12),
        0px 5px 5px black(0.2);
  }

  &.qms-primary {
    @include qms-btn(primary);
    &:not([disabled]):focus {
      &:not(:focus-visible) {
        box-shadow: 0px 8px 10px black(0.14), 0px 3px 14px black(0.12),
          0px 5px 5px black(0.2);
      }
    }

    &:not([disabled]):focus {
      box-shadow: 0 0 0 2px #8caad4,
      0px 8px 10px black(0.14), 0px 3px 14px black(0.12),
          0px 5px 5px black(0.2);
    }
  }

  &.qms-secondary {
    @include qms-btn(secondary);
    &:not([disabled]):focus {
      &:not(:focus-visible) {
        box-shadow: 0px 8px 10px black(0.14), 0px 3px 14px black(0.12),
          0px 5px 5px black(0.2);
      }
    }
    
    &:not([disabled]):focus {
      box-shadow: 0 0 0 2px #cf9b87,
      0px 8px 10px black(0.14), 0px 3px 14px black(0.12),
          0px 5px 5px black(0.2);
    }
  }
}

/********** QMS BUTTON FAB EXTEND OUTLINE  **********/
.qms-btn-fab-outlined-ext {
  @include fab-ext();
  @include qms-btn-fab-outlined(primary);

  &.qms-primary {
    @include qms-btn-fab-outlined(primary);
  }

  &.qms-secondary {
    @include qms-btn-fab-outlined(secondary);
  }
}
