@import './mixins.scss';

.md-state-container {
  position: relative;

  > .md-state-content {
    position: relative;
    z-index: 2;
  }

  > .md-state-overlay {
    background-color: currentcolor;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
  }

  @include md-state-actions;
}

.md-state-container.md-content-on-surface {
  @include md-state-surface('surface');
}

.md-state-container.md-content-is-primary {
  @include md-state-surface('primary');

  color: var(--md-primary);
}

.md-state-container.md-content-is-assect {
  @include md-state-surface('secondary');

  color: var(--md-secondary);
}

.md-state-container.md-content-on-primary {
  @include md-state-primary('primary');
}

.md-state-container.md-content-on-accent {
  @include md-state-primary('secondary');
}