skottie/modules/skottie-button-sk/skottie-button-sk.scss

@import '../../../elements-sk/modules/colors';

skottie-button-sk {
  button.base {
    box-shadow: none;
    border-radius: 4px;
    font-size: 14px;
    margin: 0;
    padding: 8px 6px;
    cursor: pointer;
    height: auto;

    &__outline {
      background: transparent;
      border: 1px solid var(--on-surface);
      color: var(--on-surface);

      &:hover,
      &:focus {
        background-color: var(--surface-2dp);
      }
    }

    &__filled {
      background: var(--primary);
      border: none;
      color: var(--on-primary);

      &:hover,
      &:focus {
        background-color: var(--primary-variant);
        color: var(--on-primary-variant);
      }

      &:disabled {
        background-color: var(--disabled);
        color: var(--background);
      }
    }

    &__plain {
      color: var(--primary-highlight);
      border: none;
      background-color: transparent;

      &:hover,
      &:focus {
        background-color: var(--surface-2dp);
      }
    }
  }
}