@import '../../../scss/base';

// Button Component
.et-fb-button {
  &,
  &button {
    outline: none;
    z-index: map-get($z-index, basic);
    position: relative;
    display: inline-block;
    background: transparent;
    max-height: 40px;
    border: 0;
    border-radius: $border-radius;
    margin: 0;
    padding: 12px;
    box-sizing: border-box;
    transition: background $transition-duration $transition-timing-function;
    color: $text-primary;
    font-family: $body-font;
    font-size: $modal-fontsize-subhead;
    font-weight: $font-semibold;
    line-height: $modal-line-height !important;
    overflow: hidden;
    vertical-align: middle;
    cursor: pointer;
    text-transform: none;
    min-height: 0;

    &:hover {
      background: none;
      color: $text-primary;
    }

    &[disabled]{
      opacity: 1;
    }

    // Icon Component
    .et-fb-icon {
      vertical-align: top;
    }

    .et-fb-icon--move {
      cursor: move;
    }
  }
}

// Button (Color)
#et-fb-app .et-fb-button {
  &,
  &button {
    &--default {
      background: $default;

      &:hover {
        background: $default;
      }
    }

    @each $label, $color in $colors-map {
      &--#{$label} {
        background: $color;
        color: $white;

        &:hover {
          background: $color;
          color: $white;
        }

        &.et-fb-button--elevate {
          box-shadow: 0 5px 10px rgba($color, 0.15);
        }
      }
    }
  }
}

#et-fb-app .et-fb-modal__global {
  .et-fb-modal__header {
    .et-fb-button {
      background: #72B900;
    }
  }
}

#et-fb-app .et-fb-modal {
  .et-fb-modal__footer {
    .et-fb-button-group {
      background: $inverse;

      @each $label, $color in $colors-map {
        .et-fb-button--#{$label} {
          margin-bottom: -1px;
        }
      }
    }
  }
}

// Button (Size)
#et-fb-app .et-fb-button {
  &--large {
    max-height: 60px;
    padding: 22px;
  }

  &--small {
    padding: 7px;
    font-size: $modal-fontsize-content-allcaps;
    line-height: 0.75;
  }
}

// Button (Type)
#et-fb-app .et-fb-button {
  &,
  &button {
    &--block {
      display: block;
      width: 100%;
    }

    &--elevate {
      box-shadow: 0 5px 10px rgba($black, 0.15);
    }

    &--round {
      border-radius: 100px;
    }

    &[disabled],
    &--disabled {
      cursor: not-allowed;

      .ink {
        display: none;
      }
    }
  }
}

.et-fb-item-button-wrap--add {
  z-index: map-get($z-index, (level-one)) + 3; // Should be higher than mousetrap
  line-height: $modal-line-height;
  transition: margin 0.25s ease-in-out;
  display: block;
  position: relative;
  left: 0;
  bottom: 0;
  padding: 10px 0 20px;
  text-align: center;

  .et-fb-button {
    background: $button;
    box-shadow: 5px 5px 15px rgba(43, 135, 218, 0.15);
    transition: padding 0.25s ease-in-out, margin 0.25s ease-in-out, bottom 0.25s ease-in-out;
    padding: 6px;

    &:hover {
      background: $button;
    }

    &:hover, &--active {
      padding: 12px;
      margin: -6px;
    }
  }

  .et-fb-settings-module-items-wrap & {
    margin-left: 0;
  }
}