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

// Button Group Component
.et-fb-button-group {
  display: inline-flex;
  align-items: center;
  border-radius: $border-radius;
  line-height: $modal-line-height;
  vertical-align: middle;


  // Button Component
  .et-fb-button {
    border-radius: 0;

    &:first-child {
      border-radius: $border-radius 0 0 $border-radius;

      .rtl.et-db #et-boc & {
        border-radius: 0 $border-radius $border-radius 0;
      }
    }

    &:last-child {
      border-radius: 0 $border-radius $border-radius 0;

      .rtl.et-db #et-boc & {
        border-radius: $border-radius 0 0 $border-radius;
      }
    }

    &--save-draft {
      border-radius: $border-radius 0 0 $border-radius !important;
    }

    &--publish {
      border-radius: $border-radius !important;
    }

    &--save-draft + .et-fb-button--publish {
      border-radius: 0 $border-radius $border-radius 0 !important;
    }

    &:only-child {
      border-radius: $border-radius;
    }

    &--round {
      &,
      &:first-child,
      &:last-child,
      &:only-child {
        border-radius: 100px;
      }
    }
  }
}


// Button Group Component (Color)
.et-fb-button-group {
  &--default {
    background: $default;
  }

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

// Button Group Component (Type)
.et-fb-button-group {
  &--block {
    display: flex;
  }

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

  &--vertical {
    flex-direction: column;

    .et-fb-button {
      &:first-child {
        border-radius: $border-radius $border-radius 0 0;

        .rtl.et-db #et-boc & {
          border-radius: $border-radius $border-radius 0 0;
        }
      }

      &:last-child {
        border-radius: 0 0 $border-radius $border-radius;

        .rtl.et-db #et-boc & {
          border-radius: 0 0 $border-radius $border-radius;
        }
      }
    }
  }
}