@include export-module('co-stock-layout') {
  .co-stock {

    .transfer-quantity-allocated {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .stock-transfer-allocated-columns {
      .stock-transfer-allocated-column {
        display: flex;
        flex-direction: column;
        box-shadow: 2px 2px 2px 2px rgba(black, 0.2);
        margin: 2em;

        .bold {
          font-weight: bold;
        }

        &.selected {
          box-shadow: 2px 2px 2px 2px rgba(#4682b4, 0.4);
        }
      }
    }

    co-stock-location {
      position: relative;

      .stock-transfer-add {
        display: flex;
        gap: 5px;
        position: absolute;
        top: -38px;
        left: 200px;
      }
    }

    .stock-transfer-add {
      display: flex;
      gap: 5px;

      co-icon {
        width: 40px;
        border: 1px solid #1A73E8;
        padding: 5px;
        cursor: pointer;

        svg {
          fill: #1A73E8;
        }

        &:hover {
          background: #1A73E8;

          svg {
            fill: #FFF;
          }
        }
      }
    }

    .stock-grid {
      co-dialog {
        .co-dialog-wrapper {
          width: 600px;
          display: flex;
        }

        .stock-dialog-header {
          font-weight: bold;
          margin-bottom: 10px;
          display: block;
        }

        .header-wrapper {
          span {
            font-weight: bold;
          }

          padding: 1em;
        }

        .dialog-wrapper {
          display: flex;
          gap: 10px;
          padding: 10px;
          flex-direction: column;
        }

        .stock-dialog-row {
          display: flex;
          align-items: center;
          gap: 20px;

          > * {
            flex: 1;
          }

          .stock-dialog-row-row {
            display: flex;
            align-items: center;
            gap: 10px;
          }

          co-input-text, co-list-of-values, co-input-number-picker {
            &:before {
              box-shadow: none;
            }
          }
        }
      }
    }

    .stock-info-container {
      max-width: $sc-stock-info-container-max-width;
      width: $sc-stock-info-container-width;
      padding: $sc-stock-info-container-padding;
      height: $sc-stock-info-container-height;
      position: relative;
    }

    .stock-info {
      margin: $sc-stock-info-margin;
      padding: $sc-stock-info-padding;
      display: inline-flex;
      width: $sc-stock-info-width;
      gap: $sc-stock-info-gap;
      border-width: $sc-stock-info-border-width;
      border-color: $sc-stock-info-border-color;
      border-style: solid;
    }

    .stock-info-row {
      display: inline-flex;
    }

    .stock-info-row-image {
      display: inline-flex;
      gap: $sc-stock-gap;
    }

    .stock-image {
      height: $sc-stock-image-height;
      margin-right: $sc-stock-image-width;

      .stock-image {
        margin-right: 0;
      }

      .no-image-wrapper {
        height: $sc-stock-image-height;
      }
    }

    .stock-good-info {
      display: block;
    }

    .stock-status {
      display: grid;
      position: relative;
    }

    .stock-info > div:not(:first-child) {
      padding: 0 0 0 30px;
      border-left: $sc-stock-border-left;

      &:before {
        content: '';
        height: 30px;
        width: 1px;
        background: #DCE4EA;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
      }
    }

    .stock-line {
      font-weight: $sc-stock-line-font-weight;
      margin: $sc-stock-line-margin;
    }

    .stock-lines-button {
      margin-bottom: 5%;
    }

    .tab-link {
      gap: 30px;

      &.hide {
        display: none;
      }

      &.show {
        display: flex;
      }

      flex-direction: row;
    }

    .tab-link > div {
      margin: 25px 0;
      padding-right: 10px;

      &.inactive {
        font-weight: normal;
      }
    }

    .stock-grid {
      margin: $sc-stock-grid-margin;

    }

    .buttons-wrapper {
      display: flex;
    }

    .dropdown-wrapper {
      display: flex;
      float: right;
      max-width: 20%;
    }

    .stock-location-group {
      display: flex;
    }

    .stock-location-left-group {
      float: left;
      display: flex;
      flex: 1;
      justify-content: flex-start;

      co-list-of-values {
        max-width: 190px;
      }
    }

    .stock-location-right-group {
      display: flex;
      justify-content: flex-end;
      min-width: 190px;

      .co-list-of-values {
        .co-input-text {
          height: 100%;
        }
      }
    }

    .stock-button-toolbar {
      display: flex;
      justify-content: space-between;
      margin: 10px;
    }

    .stock-button-left-group {
      display: flex;
      flex: 1;
      justify-content: flex-start;

      .co-button {
        margin-right: 10px;
        width: 100px;
      }
    }

    .stock-button-middle-group {
      display: flex;
      flex: 1;
    }

    .ok-cancel-buttons {
      display: flex;
      justify-content: center;
      gap: 5px;
      position: relative;

      .co-button {
        width: 100px;
        height: 36px;

        &.save-button {
          width: 36px;
          border-color: #DCE4EA;
          border-style: solid;
          border-width: 0 0 0 0;
          background-color: #1A73E8;
          padding: 8px;
          box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.3);
          cursor: pointer;
        }

        &.text-button {
          border-color: #DCE4EA;
          border-style: solid;
          border-width: 0 0 0 0;
          background-color: #475060;
          padding: 8px;
          box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.3);
          cursor: pointer;
        }

        &.cancel-button {
          width: 36px;
          border-color: #DCE4EA;
          border-style: solid;
          border-width: 0 0 0 0;
          background-color: #475060;
          padding: 8px;
          box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.3);
          cursor: pointer;
        }

        .co-icon {
          height: 20px;
          width: 20px;

          svg {
            fill: #FFF;
          }

          [fill] {
            fill: #FFF;
          }
        }
      }
    }

    .stock-transfer-wrapper {
      .co-dialog {
        .co-dialog-wrapper {
          width: 410px;
          max-width: 100%;
        }
      }

      co-send-method-dialog {
        .co-dialog {
          .co-dialog-wrapper {
            width: 600px;
            max-width: 100%;
          }
        }
      }
    }


    .stock-transfer {
      .stock-transfer-bottom-column {
        display: flex;
        flex-direction: column;
        background: #FFF;
        padding: 10px;
        border: 1px solid #ccc;
        gap: 5px;
        margin-top: -20px;

        .transfer-bottom-row {
          display: flex;
          gap: 5px;
        }

        .co-list-of-values {
          background: #f8f8fa;

          &:before {
            box-shadow: none;
          }
        }

        .co-input-text {
          background: #f8f8fa;
          width: 100%;

          &:before {
            box-shadow: none;
          }
        }
      }

      .stock-transfer-top-column {
        display: flex;
        flex-direction: row;
        background: #FFFFFF;
        padding: 30px 15px;
        gap: 10px;
        border: 1px solid #ccc;
        overflow: hidden;

        .transfer-items {
          display: flex;
          flex-direction: column;

          .transfer-item {
            display: flex;
            align-items: center;
            gap: 5px;

            .item-label {
              font-weight: 600;
            }

            .item-value {
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }

        .transfer-quantity {
          position: relative;

          .co-input-number-picker {
            height: 30px;
            max-width: 150px;
          }

          span {
            position: absolute;
            text-transform: lowercase;
            color: red;
            bottom: -15px;
          }
        }
      }

      .transfer-arrow-wrapper {
        display: flex;
        align-items: center;
        flex-direction: column;
        position: relative;
        top: -25px;

        span.half-circle {
          width: 50px;
          height: 25px;
          border-radius: 25px 25px 0 0;
          border-left: 1px solid #ccc;
          border-top: 1px solid #ccc;
          border-right: 1px solid #ccc;
          border-bottom: 1px solid transparent;
          background-color: #f8f8fa;
        }
      }

      .stock-transfer-columns {
        display: flex;
        flex-direction: column;

        .icon-wrapper {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          height: 100%;
          width: auto;
          position: relative;
          padding: 10px;
          border-radius: 100%;
          background: #f5f5fc;
          box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.3);
          top: -15px;

          co-icon {
            height: 20px;
            width: 20px;
          }
        }
      }

      .transfer-sticker-buttons {
        display: flex;
        width: 100%;
        justify-content: flex-end;
        margin-top: 5px;

        .co-button {
          height: 30px;
          padding: 0 10px;
          background-color: #1A73E8;

          .co-icon {
            height: 16px;
            width: 16px;

            svg {
              fill: #FFFFFF;
            }
          }

          .label {
            margin: 0 7px;
            color: #FFF;
          }
        }
      }
    }

    .tab-link-buttons {
      cursor: $sc-stock-tab-link-buttons-pointer;
    }

    .active {
      color: $sc-color-action;
    }

    .stock-button-back {
      color: $sc-color-action;
      cursor: pointer;
    }

    .drop-list-group {
      height: $sc-stock-grid-height;
      overflow-y: $sc-stock-grid-overflow-y;
    }

    .co-button-small {
      width: 50%;
    }

    .simple-grid {
      height: $sc-stock-grid-height;
      overflow: auto;

      thead {
        position: sticky;
        top: 0;
      }

      .co-grid-toolbar {
        .co-icon {
          border-color: #1A73E8;
          width: 38px;
          height: 28px;
          padding: 5px;
          border-radius: 0;

          svg {
            fill: #1A73E8;
            height: auto;
            width: auto;
          }

          &:hover {
            background: #1A73E8;

            svg {
              fill: #FFF;
            }
          }
        }
      }
    }

    .location-link {
      cursor: pointer;
      padding: 7px 10px;
      text-align: center;
      color: #FFFFFF;
      background: $sc-color-action;
      border-radius: 3px;
    }

    .co-dialog-wrapper {
      width: 70%;
    }

    .stock-label {
      font-size: $sc-font-size-small;
      align-self: center;
    }

    .stock-span {
      font-size: $sc-font-size;
      align-self: center;
    }

    .co-dialog {
      .dialog-content {
        overflow-x: hidden;
      }

      .co-dialog-header-title-wrapper {
        display: flex;
        align-items: center;
        gap: 10px;

        .co-icon {
          width: 20px;
          height: 20px;
          margin: 0 0 20px 0;
        }

        .co-dialog-header-title {
          font-size: 14px;
          margin: 0 0 20px 0;
          font-weight: bold;
        }
      }

      .dialog-header {
        padding: 0;

        .dialog-header-caption {
          border: none;
          margin: 0;
        }
      }
    }

    .simple-grid-table {
      position: relative;

      .simple-grid-column-header {
        border-width: 0;

        .simple-grid-column-header-wrapper {
          .simple-grid-column-header-label {
            font-size: 10px;
          }
        }

        &:hover {
          .simple-grid-column-header-wrapper {
            position: unset;

            .simple-grid-column-header-label {
              overflow: visible;
              background: #FFF;
              position: absolute;
              width: auto;
              text-overflow: unset;
              top: 0;
              font-size: 10px;
              color: #1a73e8;
              z-index: 9;
            }
          }
        }
      }
    }

    .simple-grid-row {
      border-width: 0;
      border: none;
      height: 45px;
      font-size: 10px;

      &:nth-child(odd) {
        background: #f8f8fa;

        &:hover {
          background: #d2e3f9;
        }

        &.selected {
          background: #d2e3f9;
        }
      }

      &:nth-child(even) {
        &:hover {
          background: #d2e3f9;
        }

        &.selected {
          background: #d2e3f9;
        }
      }
    }

    .simple-grid-column-cell-field {
      border-width: 1px;
      border-radius: 0;
      padding: 5px 10px;
      border-color: #DCE4EA;
      gap: 5px;

      .double-data {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 5px;

        &.link {
          gap: 10px;
          cursor: pointer;

          span {
            color: #1A73E8;
          }

          .co-icon {
            svg [fill] {
              fill: #1A73E8;
            }
          }
        }

        .co-icon {
          width: 16px;
          height: 16px;
        }

        span {
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          min-width: 8px;
        }
      }
    }

    .simple-grid-column-header-label {
      border-width: 0;
    }

    .co-simple-grid-cell {
      .menu-icon {
        cursor: pointer;
        width: 24px;
        height: 24px;
      }

      .stock-amount {
        display: flex;
        gap: 10px;
        align-items: center;
        cursor: pointer;

        .menu-icon {
          width: 14px;
          height: 14px;
        }
      }
    }

    .clickable-link {
      cursor: pointer;
      color: #1A73E8;
      text-decoration: underline;
    }

    .stock-transfer-add {
      align-items: center;

      .minimum-stock {
        position: relative;
        top: 0;
      }
    }

    .minimum-stock {
      position: absolute;
      color: #ff4141;
      font-size: 11px;
      top: -20px;
    }
  }
}