@include export-module('co-simple-tags-form-layout') {
  .co-simple-tags-form {
    width: $sc-co-simple-tags-content-width;
    .form-content-wrapper {
      display: flex;
      flex-direction: row;
      width: $sc-co-simple-tags-content-width;
      max-width: 100%;
      column-gap: $sc-co-simple-tags-content-column-gap;

      .collection-navigation {
        width: $sc-co-simple-tags-navigation-width;
        display: flex;
        flex-direction: column;
        row-gap: $sc-co-simple-tags-navigation-column-gap;
        overflow-x: hidden;
        padding-right: 3px;

        .co-input-search {
          display: block;
          .co-input-text {
            height: 30px;
            &:before {
              display: none;
            }
          }
        }

        .breadcrumbs {
          display: flex;
          flex-direction: row;
          align-items: center;

          .co-icon {
            cursor: pointer;
            width: $sc-co-simple-tags-navigation-home-icon-size;
            height: $sc-co-simple-tags-navigation-home-icon-size;
          }

          .crumbs {
            display: flex;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;

            .crumb {
              cursor: pointer;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }

            .spacer {
              margin: 0 5px;
            }
          }
        }

        .collection-view {
          display: flex;
          flex-direction: column;
          row-gap: $sc-co-simple-tags-navigation-collection-row-gap;
        }
      }

      .linked-tags-view {
        width: $sc-co-simple-tags-linked-tags-width;
        display: flex;
        flex-direction: column;
        row-gap: $sc-co-simple-tags-linked-tags-row-gap;

        .view-wrapper {
          display: grid;
          grid-template-columns: 50% 50%;
          grid-auto-rows: $sc-co-simple-tags-linked-tags-tag-height;
          column-gap: $sc-co-simple-tags-linked-tags-gap-size;
          row-gap: $sc-co-simple-tags-linked-tags-gap-size;
          width: calc(100% - #{$sc-co-simple-tags-linked-tags-gap-size});
          height: 100%;

          .collection-item {
            visibility: hidden;
          }
        }
      }

      .collection-item {
        border-radius: $sc-co-simple-tags-collection-item-border-radius;
        padding: $sc-co-simple-tags-collection-item-padding;
        border: $sc-co-simple-tags-collection-item-border;
        display: flex;
        cursor: pointer;
        background: $sc-co-simple-tags-collection-item-background-color;
        &:hover {
          background-color: $sc-co-simple-tags-collection-item-background-color;
        }
        &.draggable {
          cursor: move;
        }
        &.disabled {
          background-color: $sc-co-simple-tags-collection-item-background-color;
          cursor: default;
        }

        span {
          margin-left: 10px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        .co-icon {
          width: $sc-co-simple-tags-collection-item-icon-size;
          height: $sc-co-simple-tags-collection-item-icon-size;
        }
      }

      .tag-item {
        display: flex;
        border: $sc-co-simple-tags-collection-item-border;
        border-radius: $sc-co-simple-tags-collection-item-border-radius;
        align-items: center;
        justify-content: space-between;
        overflow: hidden;
        background: $sc-co-simple-tags-collection-item-background-color;
        .thumbnail-description {
          display: flex;
          height: 100%;
          align-items: center;
          overflow: hidden;

          .thumbnail-wrapper {
            height: inherit;

            img {
              height: inherit;
              padding: 5px;
              border-radius: $sc-co-simple-tags-collection-item-border-radius;
            }
          }

          .co-icon {
            margin: 0 8px;
            width: $sc-co-simple-tags-collection-tag-icon-size;
            height: $sc-co-simple-tags-collection-tag-icon-size;
          }

          .description-wrapper {
            display: flex;
            flex-direction: column;
            row-gap: 2px;
            justify-content: center;
            overflow: hidden;

            .description {
              font-weight: bold;
            }

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

        .delete-tag {
          cursor: pointer;
          margin: $sc-co-simple-tags-linked-tag-delete-icon-margin;
          width: $sc-co-simple-tags-linked-tag-delete-icon-size;
          height: $sc-co-simple-tags-linked-tag-delete-icon-size;
        }
      }
    }

    .dialog-footer {
      background-color: $sc-co-simple-tags-dialog-footer-background;
      border-width: $sc-co-simple-tags-dialog-footer-border-width;
      border-style: solid;
      border-color: $sc-co-simple-tags-dialog-footer-border-color;
      padding: $sc-co-simple-tags-dialog-footer-padding;
      .co-dialog-footer-button-wrapper {
        gap: $sc-co-simple-tags-dialog-footer-button-wrapper-gap;
      }
    }
    .save-button {
      height: $sc-co-simple-tags-dialog-save-button-size;
      width: $sc-co-simple-tags-dialog-save-button-size;
      border-color: $sc-co-simple-tags-dialog-button-border-color;
      border-style: $sc-co-simple-tags-dialog-button-border-style;
      border-width: $sc-co-simple-tags-dialog-button-border-width;
      background-color: $sc-co-simple-tags-dialog-button-background-color;
      padding: $sc-co-simple-tags-dialog-button-padding;
      box-shadow: $sc-co-simple-tags-dialog-button-box-shadow;
      cursor: pointer;
      .co-icon {
        height: $sc-co-simple-tags-dialog-save-button-icon-size;
        width: $sc-co-simple-tags-dialog-save-button-icon-size;
        svg {
          fill: $sc-co-simple-tags-dialog-save-button-icon-color;
        }
      }
    }
    .close-button {
      height: $sc-co-simple-tags-dialog-close-button-size;
      width: $sc-co-simple-tags-dialog-close-button-size;
      border-color: $sc-co-simple-tags-dialog-button-border-color;
      border-style: $sc-co-simple-tags-dialog-button-border-style;
      border-width: $sc-co-simple-tags-dialog-button-border-width;
      background-color: $sc-co-simple-tags-dialog-close-button-background-color;
      padding: $sc-co-simple-tags-dialog-button-padding;
      box-shadow: $sc-co-simple-tags-dialog-button-box-shadow;
      cursor: pointer;
      .co-icon {
        height: $sc-co-simple-tags-dialog-save-button-icon-size;
        width: $sc-co-simple-tags-dialog-save-button-icon-size;
        svg {
          fill: $sc-co-simple-tags-dialog-save-button-icon-color;
        }
        [fill] {
          fill: $sc-co-simple-tags-dialog-save-button-icon-color;
        }
      }
    }
    .co-input-checkbox {
      .checkbox {
        border-color: #FFFFFF;
        background-color: #FFFFFF;
        &.checked {
          border-color: $sc-co-simple-tags-checkbox-checked-background-color;
          background-color: $sc-co-simple-tags-checkbox-checked-background-color;
        }
        .checkmark {
          &.show {
            border-color: #FFFFFF;
          }
        }
      }
    }
    .disabled {
      cursor: default;
      opacity: 0.6;
    }
    .clickable {
      cursor: pointer;
    }
    .co-dialog {
      .co-dialog-wrapper {
        background: #f8f8fa;
        max-height: 90vh;
        .dialog-header, .dialog-content, .dialog-footer {
          background: #f8f8fa;
        }
      }
    }
  }
}
