@include export-module('cc-simple-grid-layout') {
  .co-simple-grid {
    display: block;
    font-family: $cc-simple-grid-font-familiy;
    font-size: $cc-simple-grid-font-size;

    thead {
      position: relative;
    }

    co-input-checkbox {
      justify-content: center;

      .checkbox {
        .checkmark {
          left: $cc-simple-grid-input-checkbox-check-mark-width * .15;

          &.show {
          }
        }
      }
    }
  }
  .simple-grid-table {
    height: 1px; // fix for 100% height of cells
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;

    td.icons-container {
        padding: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 4px;
        visibility: hidden;

      &.show-content {
        visibility: visible;
      }

    }
  }
  // styling outside of grid because of drag and drop functionality
  .simple-grid-column-auto-fit {
    white-space: nowrap;
    width: 1%;
  }
  .simple-grid-column-header-wrapper {
    font-family: $cc-simple-grid-header-font-familiy;
    font-size: $cc-simple-grid-header-font-size;
    font-weight: $cc-simple-grid-header-font-weight;
    text-transform: $cc-simple-grid-header-text-transform;
    display: flex;
    flex-direction: row;
    position: relative;

    &.selected {
      background-color: $cc-color-light-accent;
    }
  }
  .co-form.simple-grid-row-form {
    display: contents;
    width: 100%;
  }
  .simple-grid-column-header, .simple-grid-column-cell {
    //display: flex;
    //flex-direction: row;
    //padding-right: 5px;
    //flex-basis: 100%;
  }
  .simple-grid-column-header {
    justify-content: space-between;
    border-style: $cc-simple-grid-header-border-style;
    border-width: $cc-simple-grid-header-border-width;
    font-size: $cc-font-size-small;
  }
  .simple-grid-single-column-cell {
    width: 100%;
  }
  .simple-grid-column-cell {
    //padding: $cc-simple-grid-cell-padding;
    align-items: $cc-simple-grid-row-align-items;
    vertical-align: $cc-simple-grid-row-vertical-align-items;
    //height: $cc-simple-grid-row-height;
  }
  .co-simple-grid-cell {
    width: 100%;

    .co-icon {
      width: $cc-simple-grid-cell-icon-size;
      height: $cc-simple-grid-cell-icon-size;
    }

    .co-button {
      .co-icon {
        width: $cc-simple-grid-cell-icon-size;
        height: $cc-simple-grid-cell-icon-size;
      }
    }
  }
  .simple-grid-column-cell-value {
    height: 100%;
    width: 100%;

    > * {
      height: 100%;
      width: 100%;
    }
  }
  .simple-grid-column-cell-field {
    display: flex;
    align-items: $cc-simple-grid-cell-field-align-items;
    border-style: $cc-simple-grid-cell-field-border-style;
    border-width: $cc-simple-grid-cell-field-border-width;
    padding: $cc-simple-grid-cell-field-padding;
    border-radius: $cc-simple-grid-cell-field-radius;

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

    .form-input {
      width: 100%;
    }
  }
  .simple-grid-column-header-label {
    font-weight: bold;
    color: $cc-simple-grid-text-color;
    user-select: none;
    padding: $cc-simple-grid-header-padding;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-bottom: 2px solid $cc-color-grid-row-hover-background;

    &.with-menu {
      cursor: pointer;
    }

    &.with-sort {
      cursor: pointer;
    }
  }
  .sort-column {
    position: absolute;
    right: 0;
    top: 50%;
    cursor: pointer;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.8);
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition: opacity .3s ease-in-out;

    .co-button {
      width: 20px;
      height: 20px;
      background: transparent;
    }
  }
  .simple-grid-column-header {
    position: relative;

    &:hover {
      .sort-column {
        opacity: 1;
        visibility: visible;
        overflow: visible;
        transition: opacity .3s ease-in-out;
      }
    }
  }
  .simple-grid-column-sizer {
    cursor: col-resize;
    width: 5px;
  }
  .simple-grid-column-sizer-placeholder {
    width: 5px;
  }
  .simple-grid-row {
    height: $cc-simple-grid-row-height;
    font-family: $cc-simple-grid-font-familiy;
    font-size: $cc-simple-grid-font-size;
    //display: flex;
    //flex-direction: row;
    border: $cc-simple-grid-row-border;
    border-width: $cc-simple-grid-row-border-width;
    border-style: solid;
    border-color: $cc-simple-grid-row-border-color;

    &.disabled {
      opacity: $cc-simple-grid-row-disabled-opacity;
      background: $cc-simple-grid-row-disabled-background-color;
    }

    &.editing {
      .form-input {
        &:before, &:hover, &:hover:before, &.cc-input-focused, &.cc-input-focused:before {
          border: none !important; // nasty hack, fix asap
          box-shadow: none !important; // nasty hack, fix asap
        }
      }
    }
  }
  .right-align {
    text-align: right;
    justify-content: flex-end;
  }
  .center-align {
    text-align: center;
    justify-content: center;
  }
  .left-align {
    text-align: left;
    justify-content: flex-start;
  }
  .grid-settings {
    position: absolute;
    right: 0;
    top: 0;

    co-button {
      height: 30px;
      cursor: pointer;

      &.selected {
        filter: brightness(75%);
      }
    }
  }
  .simple-grid-row.cdk-drag-preview {
    box-sizing: border-box;
    border-radius: 4px;
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
    0 8px 10px 1px rgba(0, 0, 0, 0.14),
    0 3px 14px 2px rgba(0, 0, 0, 0.12);
    display: table;

    td {
      flex-grow: 2;
      font-size: 10px;
      padding: 4px;
      vertical-align: middle;
    }
  }

  .simple-grid-row.cdk-drag-placeholder {
    opacity: 0.3;
  }

  .simple-grid-row:hover {
    pointer-events: auto;
  }

  .cdk-drag-animating {
    transition: transform 200ms cubic-bezier(0, 0, 0.2, 1);
  }

  .pagination-bar {
    ul {
      margin: $cc-simple-grid-pagination-bar-margin;
    }
  }

  .settings-menu,
  .column-menu {
    position: absolute;
    top: 38px;
    right: 4px;
    width: 250px;
    padding: 0 8px 8px;
    border-radius: 5px;
    color: $cc-color-font;
    box-shadow: 0 0 8px 0 $cc-color-box-shadow;
    background-color: $cc-color-grey;
    z-index: 1;

    h3 {
      text-align: left;
    }

    ul {
      list-style-type: none;
      border-top: 1px solid $cc-color-light-accent;
      text-align: left;
      font-size: $cc-font-size-default;

      li {
        margin-top: 4px;
        padding: 8px;
        border-radius: 5px;
        text-transform: capitalize;
        font-weight: normal;
        background-color: $cc-color-grey;
        cursor: pointer;

        &:hover {
          filter: brightness(95%);
        }
      }
    }
  }

  .column-menu {
    right: auto;
    left: 0;
  }
}

.icon-item {
  &:hover {
    cursor: pointer;
  }

  &.icon-edit {
    width: 20px;
    height: 20px;
  }

  &.icon-delete {
    width: 34px;
    height: 34px;
  }
}
