@import '../elevation/mixins.scss';

@mixin md-state-actions() {
  &:hover > .md-state-overlay {
    opacity: 0.04;
  }

  &.md-focused > .md-state-overlay {
    opacity: 0.12;
  }

  &.md-selected > .md-state-overlay,
  &:active > .md-state-overlay {
    opacity: 0.08;
  }

  &.md-dragged {
    @include md-elevation(8);

    > .md-state-overlay {
      opacity: 0.08;
    }
  }

  &[disabled] {
    color: var(--md-on-surface-disabled);

    > .md-state-overlay {
      display: none;
    }
  }
}

@mixin md-state-surface($type) {
  @if $type != 'surface' and $type != 'primary' and $type != 'secondary' {
    @error '$type must be "surface" or "primary" or "secondary"';
  }

  color: var(--md-on-#{$type});
  background-color: var(--md-surface);
}

@mixin md-state-primary($type) {
  @if $type != 'primary' and $type != 'secondary' {
    @error '$type must be "primary" or "secondary"';
  }

  color: var(--md-on-#{$type});
  background-color: var(--md-#{$type});

  > .md-state-overlay {
    background-color: #fff;
  }

  &[disabled] {
    background-color: var(--md-surface-disabled);
  }
}