@import "../variables/colors";

@mixin button-transition {
  transition-property: opacity, border, color, background-color, box-shadow;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.64, 0, 0.35, 1);
}

@mixin icon-button-interactive-styles {
  &:focus,
  &:hover,
  &:active {
    outline: 0;
  }

  &:hover {
    color: $font-secondary-color;
  }

  &:focus {
    box-shadow: 0 0 1px 2px rgba($primary-color, 0.7);
  }

  &:active {
    box-shadow: 0 0 0 1px $border-primary-color;
    transition-duration: 100ms;
  }
}