@import "../../../styles/variables.scss";

:host {
  // Primary theme
  &[theme="primary"] {
    @include theme-backgrounds("color");
    background: $positive;
    color: #fff;
    text-align: left;

    &:hover,
    &:focus {
      box-shadow: $shadow-2, $shadow-1;
      filter: brightness(1.15);
    }
    &:active {
      filter: brightness(0.85);
      box-shadow: $shadow-1;
    }

    &[color="white"] {
      background: $white;
      color: $ocean;
      &:hover,
      &:focus {
        background: $background;
      }
      &:active {
        background: darken($background, 5%);
      }
      i {
        background: rgba(0, 0, 0, 0.05);
      }
    }
    &[size="large"] {
      i {
        margin-left: 3px;
      }
    }
  }
}