@import "../_variables";

.infoMessage {
  color: var(--primary-text);
  font-weight: bold;
  font-size: 1.1rem;
}

.messageBoxContainer {
  border: 1px solid var(--border-color-100);
  background: none;
  margin: 2rem 0;
  margin-bottom: 3rem;
  border-radius: 4px;

  .actionPanel {
    position: absolute;
    right: 1.5rem;
    top: 0;
    transform: translateY(-50%);
    display: flex;
    // flex-direction: column;
    gap: 1.5rem;

    .actionButton {
      cursor: pointer;
      border: 2px solid var(--border-color-100);
      border-radius: 4rem;
      padding: 0.4rem;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: var(--status-grey);
      color: #fff;
      transition: all 0.2s ease-in-out;

      &:hover {
        background-color: var(--primary-grey);
      }
    }
  }

  .todoLabel {
    font-size: nth($fontSize, 4);
    color: var(--primary-text);
    letter-spacing: 0.6px;
    font-weight: 700;
  }

  .todoPara {
    font-size: nth($fontSize, 3);
    letter-spacing: 0.6px;
    color: var(--primary-text);
    font-weight: 400;
  }

  .messageBoxForm {
    color: var(--primary-text);

    .messageBoxFormItem {
      :global {
        label {
          font-size: nth($fontSize, 3);
          color: var(--primary-text);
          margin-bottom: 0.5rem;
          letter-spacing: 0.6px;
        }

        .ant-input {
          background-color: var(--input-bg);
          border: none;
          height: 2.4rem;
          color: var(--primary-text);
          border-radius: 2px;
          padding: 0.8rem 1rem;

          &::placeholder {
            color: var(--secondary-text-500);
          }
        }

        .ant-upload-list-item {
          .ant-upload-list-item-name {
            color: var(--bugbase-green) !important;
          }

          .anticon {
            color: var(--bugbase-green) !important;
          }
        }

        .ant-upload-list-item-container .ant-tooltip {
          display: none !important;
        }
      }
    }

    .submitBtn {
      padding: 0 1.5rem;
      height: 2.5rem;
      border-radius: 4px;
    }

    .messageBoxLabel {
      font-size: nth($fontSize, 3);
      color: var(--primary-text);
      letter-spacing: 0.6px;
      font-weight: 700;
    }

    .googleSearchCard {
      background: var(--filled-purple);
      border: 1px solid var(--filled-purple);
      margin: 1rem 0;
      cursor: pointer;

      :global {
        .ant-card-body {
          padding: 0.8rem 1.4rem;
        }
      }

      &:hover {
        background: var(--filled-purple-100);
      }

      h2 {
        color: var(--primary-text);
        font-size: nth($fontSize, 3);
        font-weight: 700;
        letter-spacing: 0.6px;
        margin-bottom: 0;
      }

      a {
        color: var(--primary-text);
        font-size: nth($fontSize, 2);
        font-weight: 400;
        letter-spacing: 0.6px;
      }

      p {
        color: var(--secondary-text);
        font-size: nth($fontSize, 2);
        font-weight: 400;
        margin-bottom: 0;
        letter-spacing: 0.6px;
      }
    }

    .googleSearchCardSelected {
      background: var(--filled-purple-50);
    }
    .messageMarkdownContainer {
      margin-bottom: 1rem;
      position: relative;

      :global {
        .codeStyle {
          border: 1px solid var(--border-color-100);

          font-weight: 400 !important;
        }
      }
    }

    .showMoreContainer {
      height: 5rem;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      align-items: flex-end;
      padding: 0 1rem;

      .showMoreButton {
        background: none;
        border: none;
        color: var(--primary-text);
        gap: 10px;
        cursor: pointer;
      }
    }

    .showMoreContainerBackground {
      background: linear-gradient(
        0deg,
        var(--primary-bg) 0%,
        rgba(#202020, 0.8) 50%,
        rgba(255, 255, 255, 0) 100%
      );
    }

    .messageBoxLabelOutput {
      font-size: nth($fontSize, 2);
      color: var(--text-light);
      letter-spacing: 0.8px;
      margin: 1rem 0;
      font-weight: 700;
    }

    .loader {
      color: var(--primary-purple);

      :global {
        .ant-spin-dot-item {
          background-color: var(--primary-purple);
        }
      }
    }

    :global {
      .ant-form-item-label {
        label {
          font-size: nth($fontSize, 3);
          color: var(--primary-text);
          margin-bottom: 0.5rem;
          letter-spacing: 0.6px;
        }
      }
      .ant-input {
        min-height: 2.8rem;
        min-width: 25rem;
        padding: 0.5rem 1rem;
        border-radius: 4px;
        background: var(--input-bg) !important;
        border: 0.1px solid var(--border-color-100);
        color: var(--primary-text);
      }
      .ant-input::placeholder {
        color: var(--secondary-text);
      }

      .ant-radio-group {
        .ant-radio-wrapper {
          color: var(--primary-text);
        }
      }
    }
  }

  .divider {
    border-top: 1px solid var(--border-color-100);
    margin: 1rem 0 2rem;
  }
}

.messagestep1Summary {
  font-size: nth($fontSize, 3);
  color: var(--primary-text);
  margin: 1rem 0;
  font-weight: 600;
  letter-spacing: 0.5px;

  span {
    color: var(--secondary-text);
  }
}

.commandTableContainer {
  :global {
    .ant-table-content {
      overflow: auto;
      background: var(--primary-bg) !important;
      .ant-table-tbody {
        .ant-table-row {
          background: var(--secondary-text-100) !important;
        }
        .ant-table-cell-row-hover {
          background: var(--secondary-bg) !important;
        }
      }

      .ant-table-thead > tr > th {
        background-color: var(--secondary-bg);
        color: var(--primary-text);
        font-size: nth($fontSize, 3);
        font-weight: bold;
        border: none;

        &::before {
          display: none;
        }
      }

      .ant-table-tbody > tr > td {
        border: none;
        color: var(--primary-text);
        font-size: nth($fontSize, 3);
        font-weight: 400;
        background-color: var(--secondary-bg);
      }

      .ant-table-placeholder {
        border: none;
        background: var(--secondary-bg) !important;

        .ant-empty-description {
          color: var(--secondary-text);
        }
      }
    }

    table {
      border: 1px solid var(--border-color-100);
      border-radius: 4px;

      // want the last tr to have a border-bottom
      tr:last-child {
        td {
          border-bottom-left-radius: 4px;
          border-bottom-right-radius: 4px;
        }
      }
    }
  }
}
