@import "../../../style/mixin";

@include export-module('co-quick-send-button-layout') {
  .co-quick-send-button {
    //height: $tp-co-quick-send-button-height;
    .quick-send-button-wrapper {
      position: relative;
      display: flex;
      &.disabled {
        .icon-wrapper-flat-left, .icon-wrapper-flat-right {
          opacity: $tp-co-quick-send-button-disabled-opacity;
          pointer-events: none;
        }
      }
      &.no-dialog .icon-wrapper-flat-left {
        border-bottom-right-radius: $tp-co-quick-send-button-border-radius;
        border-top-right-radius: $tp-co-quick-send-button-border-radius;
      }
      &:hover {
        .icon-wrapper-flat-right {
          background: $tp-co-quick-send-hover-button-icon-send-color;
          co-icon {
            svg {
              fill: $tp-co-quick-send-hover-button-svg-text-color;
            }
          }
        }
        .icon-wrapper-flat-left {
          background: $tp-co-quick-send-hover-button-icon-send-color;

          .icons-wrapper {
            .icon-send, .icon-method {
              svg {
                fill: $tp-co-quick-send-hover-button-svg-text-color;
              }
            }
          }
          .send-button-title {
            color: $tp-co-quick-send-hover-button-svg-text-color;
          }
        }
      }
    }
    .icons-spacer {
      width: 4px;
    }
    .icon-wrapper-flat-left {
      display: flex;
      flex-direction: row;
      align-items: $tp-co-quick-send-button-align-items;
      justify-content: center;
      cursor: pointer;
      background: $tp-co-quick-send-button-background-color;
      border-bottom-left-radius: $tp-co-quick-send-button-border-radius;
      border-top-left-radius: $tp-co-quick-send-button-border-radius;
      column-gap: $tp-co-quick-send-button-column-gap;
      padding: $tp-co-quick-send-button-padding;
      box-shadow: 0px 0px 7px 2px rgba(160,160,160,0.3);
      .icons-wrapper {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
      }
      //width: 75%;
      .icon-send {
        width: $tp-co-quick-send-button-icon-send-width;
        height: $tp-co-quick-send-button-icon-send-height;

        svg { // for fontawesome icons
          fill: $tp-co-quick-send-button-icon-send-color;
        }
        & [fill] { // for own icons
          fill: $tp-co-quick-send-button-icon-send-color;
        }
      }
      .icon-method {
        width: $tp-co-quick-send-button-icon-send-method-width;
        height: $tp-co-quick-send-button-icon-send-method-height;
        svg { // for fontawesome icons
          fill: $tp-co-quick-send-button-icon-send-color;
        }
        & [fill] { // for own icons
          fill: $tp-co-quick-send-button-icon-send-color;
        }
      }
      .send-button-title {
        font-size: $tp-co-quick-send-button-title-font-size;
      }
    }

    .icon-wrapper-flat-right {
      background: $tp-co-quick-send-button-background-color;
      border-bottom-right-radius: $tp-co-quick-send-button-border-radius;
      border-top-right-radius: $tp-co-quick-send-button-border-radius;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0px 0px 7px 2px rgba(160,160,160,0.3);
      .co-icon {
        width: $tp-co-quick-send-button-send-method-dialog-icon-size;
        height: $tp-co-quick-send-button-send-method-dialog-icon-size;
      }
    }
    .co-loader {
      position: absolute;
      height: 80%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    &.with-method-dialog-icon {
      .co-loader {
        left: 35%;
      }
    }
  }
}