@import 'variables';

@mixin widget-shadow-base {
  border-radius: $default-border-radius;
  box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.12);
}

@mixin widget-shadow {
  @include widget-shadow-base;
  border: 1px solid $color-lightgrey-2;
}

@mixin widget-shadow-reverse {
  @include widget-shadow-base;
  border: 2px solid $color-white;
}

@mixin room-widget-text-style {
  font-family: $sans-serif-font-family;
  font-size: 1rem;
  fill: $color-darkgrey-1;
}

@mixin input-box-shadow {
  border: 1px solid #DBDBDB;
  box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.15);
}

@mixin skillbox-colors {
  &--yellow {
    background-color: $color-accent-1;
  }
  &--blue {
    background-color: $color-accent-2;
  }
  &--red {
    background-color: $color-accent-3;
  }
  &--green {
    background-color: $color-accent-4;
  }

}

@mixin content-box($main-color) {
  background-color: rgba($main-color, 0.15);
  padding: 15px;
  align-items: start;
  border-radius: $default-border-radius;

  /deep/ .button {
    border-color: $main-color;
    background-color: $color-white;
  }
}

@mixin desktop {
  @media (min-width: 1024px) {
    @content
  }
}