@import '~wix-rich-content-common/dist/statics/styles/mixins';
@import '~wix-rich-content-common/dist/statics/styles/palette';
@import '~wix-rich-content-common/dist/statics/styles/consts';

.buttonWrapper {
  position: relative;
  display: inline-block;
  margin-right: 5px;

  &:last-child {
    margin-right: 0;
  }
}

.button {
  background: transparent;
  color: $secondary-text-color;
  border: 0;
  vertical-align: bottom;
  height: 100%;
  pointer-events: initial;
  
  &:hover:not([disabled]),
  &:focus:not([disabled]) {
    .icon {
      cursor: pointer;
      color: $accent-color;
      @include svg-fill;
    }
  }

  &:disabled {
    &>*{
      opacity: 0.4;
      cursor: default;
    }
  }
}

.fileUploadButton {
  padding: 0 7px;
  display: inline-block;
  font-family: Helvetica;
  font-weight: normal;
  line-height: inherit;
  font-size: inherit;
}

.icon {
  display: inline-block;
  width: $icon-width;
  height: $icon-width;
  vertical-align: middle;
  color: $secondary-text-color;

  svg {
    width: 100%;
    height: 100%;
  }

  @include svg-fill;
}

.label {
  font-size: 12px;
  margin-left: 8px;
  vertical-align: middle;
}

.mobile {
  &.buttonWrapper {
    height: 100%;
  }

  .button {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 22px 0;
  }

  .icon {
    $size: 25px;

    display: block;
    width: $size;
    height: $size;
    margin: 0 auto;
  }

  .label {
    display: block;
    font-size: 13px;
    line-height: 21px;
    margin: 6px 0 0;
  }
}