%option-shadow {
  box-shadow: 0 0 0 1px rgba($black, 0.1) inset;
}

@mixin add-shadow($color) {
  &.background-color--light-#{$color} {
    .background-color--light-#{$color} & {
      @extend %option-shadow;
    }
  }

  &.background-color--#{$color} {
    .background-color--#{$color} & {
      @extend %option-shadow;
    }
  }

  &.background-color--dark-#{$color} {
    .background-color--dark-#{$color} & {
      @extend %option-shadow;
    }
  }

  &.background-color--darker-#{$color} {
    .background-color--darker-#{$color} & {
      @extend %option-shadow;
    }
  }
}

@mixin add-shadow-on-same-background() {
  @include add-shadow('red');
  @include add-shadow('blue');
  @include add-shadow('gray');
  @include add-shadow('green');
  @include add-shadow('orange');
  @include add-shadow('yellow');
  @include add-shadow('purple');
  @include add-shadow('pink');
  @include add-shadow('brown');
  @include add-shadow('cyan');
}