@include export-module('co-send-method-dialog-layout') {
  .co-send-method-dialog {
    font-family: $sc-co-send-method-dialog-font-family;
    font-size: $sc-co-send-method-dialog-font-size;
    .co-dialog {
      .co-dialog-wrapper {
        max-height: 90vh;
        width: 500px;
        max-width: 100%;
        background-color: #ffffff;
      }
      .dialog-header, .dialog-content, .dialog-footer {
        background-color: #ffffff;
      }
      .dialog-header {
        .dialog-header-caption {
          border: none;
        }
      }
    }
    .co-dialog-header-title-wrapper {
      display: flex;
      align-items: center;
      gap: 10px;
      .co-icon {
        width: 20px;
        height: 20px;
        margin: 0;
      }
    }
    .dialog-content-wrapper {
      min-width: $sc-co-send-method-dialog-min-width;
      height: $sc-co-send-method-dialog-height;
      display: flex;
      flex-direction: column;
      overflow: hidden;

      .pdf-preview-button {
        height: $sc-pdf-preview-button-height;
        width: $sc-pdf-preview-button-width;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: $sc-pdf-preview-button-background-color;
        border-radius: $sc-pdf-preview-button-border-radius;
        cursor: pointer;
        border: 1px solid $sc-pdf-preview-button-selected-background-color;
        margin-top: 10px;
        .co-icon {
          width: $sc-pdf-preview-button-icon-height; //wrong icon with whitespace
          height: $sc-pdf-preview-button-icon-width; //wrong icon with whitespace
          svg {
            fill: $sc-pdf-preview-button-selected-background-color;
          }
        }
        &.selected {
          background-color: $sc-pdf-preview-button-selected-background-color;
          .co-icon {
            svg { // for fontawesome icons
              fill: $sc-pdf-preview-button-icon-selected-color;
            }
            & [fill] { // for own icons
              fill: $sc-pdf-preview-button-icon-selected-color;
            }
          }
        }
      }

    }
    .send-methods-wrapper {
      display: flex;
      flex-direction: row;
      column-gap: $sc-co-send-method-dialog-send-method-buttons-column-gap;
      justify-content: $sc-co-send-method-dialog-send-method-buttons-justify-content;
      span.send-methods-label {
        font-weight: 500;
      }
    }
    .send-button-wrapper {
      cursor: pointer;
      user-select: none;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: $sc-co-send-method-dialog-send-method-button-justify-content;
      height: $sc-co-send-method-dialog-send-method-button-height;
      width: $sc-co-send-method-dialog-send-method-button-width;
      border-radius: $sc-co-send-method-dialog-send-method-button-radius;
      border-style: $sc-co-send-method-dialog-send-method-button-border-style;
      border-width: $sc-co-send-method-dialog-send-method-button-border-width;
      padding: 0;
      margin: 0;
      &.selected {
        .custom-button-title {
          color: $sc-co-send-method-dialog-send-method-selected-title-font-color;
        }
      }
      .custom-button-icon {
        height: $sc-co-send-method-dialog-send-method-icon-size;
        width: $sc-co-send-method-dialog-send-method-icon-size;
      }
      .custom-button-title {
        font-family: $sc-co-send-method-dialog-send-method-title-font-family;
        font-size: $sc-co-send-method-dialog-send-method-title-font-size;
        font-weight: $sc-co-send-method-dialog-send-method-title-font-weight;
        text-align: $sc-co-send-method-dialog-send-method-title-align;
      }
    }
    .dialog-navigation-wrapper {
      display: flex;
      gap: 30px;
      align-items: center;
      justify-content: flex-start;
      padding: 20px 0 10px 0;
      border-style: solid;
      border-width: 0 0 5px 0;
      border-color: #f8f8fa;
    }
    .send-method-navigation-wrapper {
      display: flex;
      overflow: hidden;
      height: 100%;
      &.smooth-scrolling {
        scroll-behavior: smooth;
      }
    }
    .send-method-navigation-content {
      display: flex;
      flex-basis: 100%;
      flex-shrink: 0;
      overflow: auto;
      min-height: 100%;
    }
    .dialog-footer {
      background-color: $sc-co-send-method-dialog-footer-background;
      border-width: $sc-co-send-method-dialog-footer-border-width;
      border-style: solid;
      border-color: $sc-co-send-method-dialog-footer-border-color;
      padding: $sc-co-send-method-dialog-footer-padding;
      .co-dialog-footer-button-wrapper {
        gap: $sc-co-send-method-dialog-footer-button-wrapper-gap;
      }
    }
    .save-button {
      height: $sc-co-send-method-dialog-save-button-size;
      width: $sc-co-send-method-dialog-save-button-size;
      border-color: $sc-co-send-method-dialog-button-border-color;
      border-style: $sc-co-send-method-dialog-button-border-style;
      border-width: $sc-co-send-method-dialog-button-border-width;
      background-color: $sc-co-send-method-dialog-button-background-color;
      padding: $sc-co-send-method-dialog-button-padding;
      box-shadow: $sc-co-send-method-dialog-button-box-shadow;
      cursor: pointer;
      .co-icon {
        height: $sc-co-send-method-dialog-save-button-icon-size;
        width: $sc-co-send-method-dialog-save-button-icon-size;
        svg {
          fill: $sc-co-send-method-dialog-save-button-icon-color;
        }
      }
    }
    .close-button {
      height: $sc-co-send-method-dialog-close-button-size;
      width: $sc-co-send-method-dialog-close-button-size;
      border-color: $sc-co-send-method-dialog-button-border-color;
      border-style: $sc-co-send-method-dialog-button-border-style;
      border-width: $sc-co-send-method-dialog-button-border-width;
      background-color: $sc-co-send-method-dialog-close-button-background-color;
      padding: $sc-co-send-method-dialog-button-padding;
      box-shadow: $sc-co-send-method-dialog-button-box-shadow;
      cursor: pointer;
      .co-icon {
        height: $sc-co-send-method-dialog-save-button-icon-size;
        width: $sc-co-send-method-dialog-save-button-icon-size;
        svg {
          fill: $sc-co-send-method-dialog-save-button-icon-color;
        }
        [fill] {
          fill: $sc-co-send-method-dialog-save-button-icon-color;
        }
      }
    }
    .dialog-content {
      .co-input-checkbox {
        .checkbox {
          border-color: #f8f8fa;
          background-color: #f8f8fa;
          &.checked {
            border-color: $sc-popup-checkbox-checked-background-color;
            background-color: $sc-popup-checkbox-checked-background-color;
          }
          .checkmark {
            &.show {
              border-color: #f8f8fa;
            }
          }
        }
      }
    }
  }
}