@use './colors';

@mixin all {
  .seam-table {
    .seam-search-text-field {
      width: 170px;
    }

    .seam-table-header {
      .seam-left {
        display: flex;
        align-items: center;

        .seam-add-button {
          margin-left: 8px;
        }
      }
    }

    .seam-table-row {
      cursor: pointer;

      .seam-icon-cell {
        flex: 0;
        display: flex;
        align-items: center;
        justify-content: center;

        > div {
          width: 32px;
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 4px;

          @media only screen and (width >=768px) {
            width: 40px;
            margin-right: 4px;
          }
        }
      }

      .seam-name-cell {
        flex: 1;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 2px;
        overflow: hidden;

        .seam-title {
          max-width: 380px;
        }

        .seam-details {
          font-size: 12px;
          line-height: 134%;
          color: colors.$text-gray-1;
          display: flex;
          flex-wrap: wrap;

          @media only screen and (width >=768px) {
            font-size: 14px;
          }

          .seam-device-name {
            max-width: 190px;
            width: auto;
          }

          .seam-dot-divider {
            margin: 0 4px;
            color: colors.$text-gray-3;
          }
        }
      }

      .seam-action-cell {
        margin-right: 8px;
        display: flex;
        align-items: center;
        justify-content: center;

        @media only screen and (width >=768px) {
          margin-right: 12px;
        }
      }

      .seam-issue-icon-wrap {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 8px;
        font-size: 25px;
      }
    }

    .seam-grayed-out {
      opacity: 0.4;
    }
  }

  .seam-table-action-menu {
    .seam-delete-confirmation {
      padding: 8px 16px;
      text-align: center;

      .seam-actions {
        margin-top: 16px;
        display: flex;
        gap: 8px;
        justify-content: center;
      }
    }

    .seam-menu-item-copy {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex: 1;

      svg {
        scale: 0.75;

        * {
          fill: colors.$primary;
        }
      }
    }
  }
}