AlchemyCMS/alchemy_cms

@mixin default-focus-style(
  $border-color: $focus-color,
  $box-shadow: 0 0 0 2px $focus-color,
  $border-radius: $default-border-radius
) {
  border-color: $border-color;
  border-radius: $border-radius;
  box-shadow: $box-shadow;
  outline: none;

  &::-moz-focus-inner {
    border: none !important;
    padding: 1px !important;
  }
}

@mixin button-defaults(
  $background-color: $button-bg-color,
  $hover-color: $button-hover-bg-color,
  $hover-border-color: $button-hover-border-color,
  $border-radius: $button-border-radius,
  $border: $button-border-width solid $button-border-color,
  $box-shadow: $button-box-shadow,
  $padding: $button-padding,
  $margin: $button-margin,
  $color: $button-text-color,
  $line-height: $form-field-line-height,
  $focus-border-color: $button-focus-border-color,
  $focus-box-shadow: $button-focus-box-shadow
) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: $default-font-family;
  font-size: $default-font-size;
  font-weight: $button-font-weight;
  height: 30px;
  padding: $padding;
  cursor: pointer;
  border-radius: $border-radius;
  background-color: $background-color;
  box-shadow: $box-shadow;
  border: $border;
  color: $color;
  margin: $margin;
  -webkit-appearance: none;
  transition: all $transition-duration;
  @include antialiased-font-smoothing;

  &:hover {
    text-decoration: none;
    background-color: $hover-color;
    border-color: $hover-border-color;
  }

  &:active,
  &.active {
    box-shadow: inset $button-box-shadow;
  }

  &:focus {
    @include default-focus-style(
      $border-color: $focus-border-color,
      $box-shadow: $focus-box-shadow
    );
  }

  &.disabled,
  &[disabled],
  &.disabled:active,
  &[disabled]:active,
  &.disabled:hover,
  &[disabled]:hover {
    background-color: transparentize($button-bg-color, 0.5);
    cursor: not-allowed;
    box-shadow: none;
  }

  &::-moz-focus-inner {
    padding: 0 !important;
    margin: -1px !important;
  }
}

@mixin form-label {
  width: $form-left-width;
  padding-right: 2 * $default-padding;
  padding-top: 0.6em;
  margin-top: $default-margin;
  vertical-align: top;
  word-break: normal;
  float: left;
  text-align: right;
  font-size: $default-font-size;
}

@mixin form-value-display {
  float: right;
  width: $form-right-width;
  margin: $form-field-margin;
  padding: $default-padding 2 * $default-padding;
  line-height: 21px;
  min-height: $form-field-height;
  background: white;
  border-radius: $default-border-radius;
}

@mixin form-hint(
  $background-color: $light_yellow,
  $border-color: $medium-gray
) {
  font-size: $small-font-size;
  line-height: 1.5em;
  padding: $default-padding;
  background-color: $background-color;
  border: 1px solid $border-color;
  display: block;
  clear: both;
  border-radius: $default-border-radius;
}

@mixin animate-left {
  -webkit-transition: left 0.15s ease-in-out;
  -moz-transition: left 0.15s ease-in-out;
  -ms-transition: left 0.15s ease-in-out;
  -o-transition: left 0.15s ease-in-out;
  transition: left 0.15s ease-in-out;
}

@mixin bottom-right-rounded-border {
  $side: bottom-right;
  $radius: 3px;
  -webkit-border-#{$side}-radius: $radius;
  -moz-border-radius-#{$side}: $radius;
  -ms-border-#{$side}-radius: $radius;
  -o-border-#{$side}-radius: $radius;
  border-#{$side}-radius: $radius;
}

@mixin drop-shadow {
  $shadow: 0px 0px 4px $dark-gray;
  -webkit-box-shadow: $shadow;
  -moz-box-shadow: $shadow;
  -ms-box-shadow: $shadow;
  -o-box-shadow: $shadow;
  box-shadow: $shadow;
}

@mixin label-base(
  $margin: 2 * $default-margin 0,
  $padding: $default-padding 3 * $default-padding
) {
  display: inline-flex;
  align-items: center;
  gap: $default-padding;
  vertical-align: middle;
  padding: $padding;
  margin: $margin;
  background-color: $medium-gray;
  overflow: hidden;
  position: relative;
  border-radius: $default-border-radius;
  color: $text-color;
}

@mixin tag-base(
  $margin: 2 * $default-margin 0,
  $padding: $default-padding 3 * $default-padding
) {
  @include label-base($margin: $margin, $padding: $padding);

  &:before {
    display: inline-flex;
    flex-shrink: 0;
    content: "";
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{$icon-color}"><path d="M10.9042 2.10025L20.8037 3.51446L22.2179 13.414L13.0255 22.6063C12.635 22.9969 12.0019 22.9969 11.6113 22.6063L1.71184 12.7069C1.32131 12.3163 1.32131 11.6832 1.71184 11.2926L10.9042 2.10025ZM11.6113 4.22157L3.83316 11.9997L12.3184 20.485L20.0966 12.7069L19.036 5.28223L11.6113 4.22157ZM13.7327 10.5855C12.9516 9.80448 12.9516 8.53815 13.7327 7.7571C14.5137 6.97606 15.78 6.97606 16.5611 7.7571C17.3421 8.53815 17.3421 9.80448 16.5611 10.5855C15.78 11.3666 14.5137 11.3666 13.7327 10.5855Z"></path></svg>')
      no-repeat center;
    width: 1rem;
    height: 1rem;
  }

  &:focus {
    @include default-focus-style($box-shadow: inset 0 0 0 2px $focus-color);
  }
}

@mixin linked-button(
  $border-radius: $default-border-radius,
  $line-height: $form-field-line-height,
  $padding: 3px
) {
  @include button-defaults(
    $line-height: $line-height,
    $background-color: $linked-button-color,
    $hover-color: darken($linked-button-color, 10%),
    $border: 1px solid $linked-border-color,
    $hover-border-color: darken($linked-border-color, 10%),
    $border-radius: $border-radius,
    $box-shadow: none,
    $padding: $padding,
    $margin: 0
  );
}

@mixin zoom-in {
  cursor: pointer;
  cursor: image-url("alchemy/lupe.cur");
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}

@mixin truncate($max-width, $display: inline-block, $wrap: normal) {
  display: $display;
  max-width: $max-width;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: $wrap;
}

@mixin clearfix {
  &::after {
    clear: both;
    content: "";
    display: table;
  }
}

@mixin border-top-radius($radius) {
  border-top-left-radius: $radius;
  border-top-right-radius: $radius;
}

@mixin border-bottom-radius($radius) {
  border-bottom-left-radius: $radius;
  border-bottom-right-radius: $radius;
}

@mixin border-left-radius($radius) {
  border-bottom-left-radius: $radius;
  border-top-left-radius: $radius;
}

@mixin border-right-radius($radius) {
  border-bottom-right-radius: $radius;
  border-top-right-radius: $radius;
}

@mixin antialiased-font-smoothing {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}