.ui-btn {
  align-items: center;
  display: grid;
  grid-template-areas: "icon label badge caret";
  grid-template-columns: auto auto 0 auto auto;
  justify-content: center;
  pointer-events: all;
  position: relative;
  text-decoration: none;

  .ui-badge {
    align-self: center;
    grid-area: badge;
    line-height: 1rem;
    text-align: center;
    font-weight: 600;
    border-radius: 0.6rem;
    height: 1rem;
    min-width: 1rem;
    margin: 0 auto;
    padding: 0 0.15rem;
    position: relative;
    right: 1rem;
    &__top {
      top: -8px;
    }
    &__bottom {
      bottom: -8px;
    }
  }

  $base: unquote(".ui-btn");

  &__inner {
    display: grid;
    grid-template-areas: "button divider caret";
    grid-template-columns: 1fr auto auto;
    height: 100%;
    overflow: hidden;
  }

  &__wrapper {
    display: inline-block;
    margin: 2px;
    pointer-events: none;
    position: relative;
    vertical-align: middle;

    &[data-busy="true"] {
      #{$base} {
        pointer-events: none;

        &__inner {
          cursor: wait;
          pointer-events: all;
        }
      }
    }

    @at-root #{$base}__group,
      & {
      &[data-disabled="true"] {
        #{$base} {
          pointer-events: none;

          &__inner {
            box-shadow: none;
            cursor: not-allowed;
            opacity: 0.5;
            pointer-events: all;
          }
        }
      }

      &[data-size="xs"] #{$base}__inner {
        font-size: map-get($font-sizes, xs);
      }

      &[data-size="sm"] #{$base}__inner {
        font-size: map-get($font-sizes, sm);
      }

      &[data-size="md"] #{$base}__inner {
        font-size: map-get($font-sizes, md);
      }

      &[data-size="lg"] #{$base}__inner {
        font-size: map-get($font-sizes, lg);
      }
    }
  }

  &__icon {
    grid-area: icon;
    line-height: 0.75;
    padding: 0.5em;
    display: grid;
  }

  .ui-svg-icon {
    font-size: 1.5em;
  }

  &__label {
    font-weight: $font-weight-medium;
    grid-area: label;
    line-height: 2;
    text-align: center;
    @include ellipsis();

    &:empty {
      display: none;
    }

    &:not(:empty) {
      &:first-child {
        @include property-prefix(padding-start, 0.5em);
      }

      &:last-child {
        @include property-prefix(padding-end, 0.5em);
      }
    }
  }

  &__caret {
    grid-area: caret;
  }

  &__split {
    grid-area: caret;
  }

  &__caret--hide &__caret {
    display: none;
  }

  &--block {
    max-width: none;
    width: 100%;
  }

  &__icon--end & {
    grid-template-areas: "label badge caret icon";

    &__label {
      padding: 0;

      &:first-child {
        @include property-prefix(padding-end, 0.5em);
      }

      &:last-child {
        @include property-prefix(padding-start, 0.5em);
      }
    }
  }

  &__icon--hilight & {
    &__label {
      padding: 0 0.5em;
    }
  }

  &__icon--top & {
    grid-template-areas: "icon icon caret" "label badge caret";

    &__icon {
      justify-self: stretch;
      margin: 0;
      text-align: center;
    }

    &__label {
      @include property-prefix(padding-start, 1em, padding-left);

      &:last-child {
        @include property-prefix(padding-end, 1em, padding-right);
      }
    }
  }

  &__divider {
    grid-area: divider;
    margin: 0;
    width: 1px;
  }

  &__ag-grid {
    .ui-btn__icon {
      padding: 0.1em;
    }
  }
}

ui-button {
  border-radius: $base-border-radius;
  transition: all 0.25s ease;
}
