tornado-initiation-ui/assets/styles/components/_button.scss

.button {
  font-weight: 700;

  &.is-icon {
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    background-color: transparent;
    border: none;

    .icon {
      height: 1.5rem;
      width: 1.5rem;
    }

    .trnd {
      width: 100%;
      height: 100%;
      background-color: #6B6B6B;
    }

    &:focus:not(:active), &.is-focused:not(:active) {
      box-shadow: none;
    }
  }

  &.is-primary {
    &.is-outlined {
      background-color: #182922;
    }

    .trnd {
      background-color: $primary;
    }

    &:hover, &:focus {
      .trnd {
        background-color: $primary-invert;
      }
    }

    &[disabled] {
      .trnd {
        background-color: $primary;
      }
    }
  }

  .icon {
    &:first-child:not(:last-child) {
      margin-left: -0.15em;
      margin-right: 0.5em; }
    &:last-child:not(:first-child) {
      margin-left: 0.5em;
      margin-right: -0.15em; }
    &:first-child:last-child {
      margin-left: 0;
      margin-right: 0; }
  }

  &:not(.is-small) {
    span:not(.icon):not(.b-tooltip):first-child:last-child {
      padding: 0 .5rem;
    }
  }
}

.buttons {
  .button.is-icon:not(:last-child):not(.is-fullwidth) {
    margin-right: 1.25rem;
  }

  .break {
    margin: 0 1.25rem .5rem 0;
    width: 1px;
    align-self: stretch;
    background-color: #2A2A2A;
  }
}