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

:host {
  // Icon Themed Button
  &[theme="icon"] {
    @include theme-text-colors("color");
    padding: $spacing-sm;
    font-size: 1.4rem;
    height: 2.4rem;
    &[inverse] {
      color: #fff;
    }
    i {
      display: contents;
      margin: 0 !important;
    }
    &:focus,
    &:hover {
      background: rgba(0, 0, 0, 0.1);
    }
    &:active {
      background: rgba(0, 0, 0, 0.25);
    }
    .button-contents {
      display: contents;
    }
    &[size="small"] {
      padding: $spacing-sm;
      font-size: 1.2rem;
      height: 2rem;
    }
    &[size="medium"] {
      font-size: 1.6rem;
    }
    &[size="large"] {
      font-size: 2rem;
      height: 2.8rem;
      padding: $spacing-md;
    }
  }
}