@import '~@digitaldealers/cms-theme/style/variables';
@import 'variables';

@mixin placeholder {
  color: $black;
  font-size: 16px;

  &::-webkit-input-placeholder {
    color: $search-placeholder-gray !important;
  }

  &:-ms-input-placeholder {
    color: $search-placeholder-gray !important;
  }

  &::placeholder {
    color: $search-placeholder-gray !important;
  }
}

@mixin widget-modal-layout {
  .widget-wrapper {
    margin: 0 #{-$modal-padding} #{-$modal-padding};
    width: calc(100% + #{$modal-padding * 2}) !important;
  }

  .widget-header {
    padding: 0 0 0 $modal-padding;
    margin: #{-$modal-padding} #{-$modal-padding} 0;
    width: calc(100% + #{$modal-padding * 2}) !important;
  }

  .widget-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 0 #{-$modal-padding} #{-$modal-padding};
    width: calc(100% + #{$modal-padding * 2}) !important;
    height: $widget-header-height;
    border-top: 1px solid darken($white, 6);
    background: $header-color;
  }
}

@mixin theme-textarea {
  textarea {
    padding: 0;
  }
}

@mixin spinner-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

@mixin ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

@mixin merge-icon {
  transform: rotate(90deg);
  color: $action-icon-color;
}