@import './variables';

.s-btn {
  align-items: center;
  border-radius: $btn-border-radius;
  display: inline-flex;
  flex: 0 0 auto;
  overflow: hidden;
  position: relative;
  outline: 0;
  justify-content: center;
  user-select: none;
  vertical-align: middle;
  white-space: nowrap;
  text-decoration: none;
  transition-duration: $btn-transition-duration;
  transition-property: box-shadow, transform, opacity;
  background-color: var(--theme-app-bar);

  a,
  .s-icon {
    color: inherit;
  }

  .s-btn__content {
    display: flex;
    align-items: center;
    flex: 1 0 auto;
    color: inherit;
    justify-content: inherit;
    line-height: normal;
    position: relative;
    font-size: inherit;
    font-weight: map-deep-get($headings, 'button', 'weight');
    letter-spacing: map-deep-get($headings, 'button', 'letter-spacing');
    text-transform: map-deep-get($headings, 'button', 'text-transform');
  }

  @include elevation(2);

  &::before {
    border-radius: inherit;
    bottom: 0;
    color: inherit;
    content: '';
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    transition: $btn-transition;
    background-color: currentColor;
  }

  @each $name, $size in $btn-font-sizes {
    &.size-#{$name} {
      font-size: $size;
    }
  }

  &:not(.disabled) {
    &:hover::before {
      opacity: $btn-hover-opacity;
    }

    &.active::before {
      opacity: $btn-active-opacity;
    }

    &.focus-visible::before {
      opacity: $btn-focus-opacity;
    }
  }

  &:not(.outlined) {
    @include has-theme-bg {
      color: map-deep-get($material-dark-theme, 'text', 'primary');
    }
  }

  &:not(.icon):not(.s-btn--fab) {
    @each $name, $size in $btn-sizes {
      &.size-#{$name} {
        height: #{$size}px;
        min-width: #{round($size * 1.777777777777778)}px; // default ratio
        padding: 0 #{$size / 2.25}px;
      }
    }
  }

  &:not(.disabled):not(.depressed) {
    will-change: box-shadow;
  }

  &.block {
    display: flex;
    flex: 1 0 auto;
    min-width: 100% !important;
    max-width: auto;
  }

  &.tile {
    border-radius: 0;
  }

  &.text {
    background-color: transparent;
  }

  &.depressed {
    box-shadow: none;
  }

  &.outlined {
    border: 1px solid currentColor;
    background-color: transparent !important;
  }

  &.rounded {
    border-radius: map-get($rounded, 'pill');
  }

  &.disabled {
    pointer-events: none;
    color: var(--theme-buttons-disabled);

    &:not(.flat):not(.text):not(.outlined) {
      background-color: var(--theme-buttons-disabled);
    }
  }

  &.icon {
    @each $name, $size in $btn-sizes {
      &.size-#{$name} {
        height: #{$size}px;
        width: #{$size}px;
      }
    }
  }

  &.icon,
  &.s-btn--fab {
    border-radius: 50%;
    min-width: 0;
    min-height: 0;
    padding: 0;
    @each $name, $size in $fab-icon-sizes {
      &.size-#{$name} .s-icon {
        font-size: #{$size}px;
      }
    }
  }

  &.s-btn--fab {
    @each $size, $value in $fab-sizes {
      &.size-#{$size} {
        height: #{$value}px;
        width: #{$value}px;
      }
    }
  }
}