import styled from "styled-components";

export const Container = styled.div`
  width: 100%;
`;

export const Content = styled.div`
  width: 100%;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 10px;
  margin-top: 8px;
  &.personal {
    grid-template-columns: 1fr;
  }
`;
export const Sidebar = styled.div`
  width: 100;
  display: flex;
  flex-direction: column;
  gap: 20px;
`;
export const ProgressSidebar = styled.div`
  width: 100%;
  border-radius: 25px;
  background: #fff;
  padding: 20px 20px;
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 20px;

  ul {
    display: flex;
    flex-direction: column;
    width: 100%;
    list-style: none;
    li {
      padding-bottom: 15px;
      border-bottom: 1px solid #f5f7f7;
      margin-bottom: 15px;
      &:last-child {
        padding-bottom: 0px;
        border-bottom: none;
        margin-bottom: 0px;
      }
      > p {
        color: #636666;
        font-size: 12px;
      }

      .no-score {
        border-radius: 15px;
        background: #fff9e8;
        display: flex;
        padding: 5px 10px;
        gap: 5px;
        width: 100%;
        margin-top: 5px;
        svg {
          width: 16px;
          height: 16px;
          flex-shrink: 0;
        }
        p {
          color: #636666;
          font-size: 12px;
        }
      }
      .progress-section {
        margin-top: 5px;
        padding: 0 14px;
        height: 37px;
        border-radius: 100px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 12px;
        span {
          font-size: 20px;
          font-weight: 700;
        }

        .rs-progress-line-outer {
          .rs-progress-line-bg {
            border-radius: 6px;
            overflow: hidden;
          }
        }
      }
    }
  }
`;

export const ProgressCircleSection = styled.div`
  width: 130px;
  height: 130px;
  display: grid;
  place-items: center;
  margin: 0 auto;
  position: relative;
  .progress-circle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  p {
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    color: #636666;
    width: fit-content;
    span {
      font-size: 20px;
      color: #4a4d4d;
    }
  }
`;

export const SpeechSideSection = styled.div`
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 20px;
  background-color: #fff;
  border-radius: 25px;
`;

export const MainSection = styled.div`
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
`;

export const ModelComtainer = styled.div`
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  color: #4a4d4d;
`;
export const EvaluationHeader = styled.div`
  border-radius: 32px;
  background: #fff;

  padding: 12px 20px;
  display: flex;
  align-items: center;
  width: 100%;
  p {
    font-size: 16px;
  }
`;

export const ModelContent = styled.div`
  border-radius: 32px;
  background: #fff;
  padding: 20px;
  min-height: 390px;
  .ul_tabs {
    padding-bottom: 20px;
    border-bottom: 1px solid #dfe5e5;
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    &.no-border {
      border-bottom: none;
    }
    li {
      border-radius: 32px;
      background: #f5f7f7;
      height: 32px;
      min-width: 130px;
      width: fit-content;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 0 12px;
      color: #949999 !important;
      font-size: 16px;
      cursor: pointer;
      &.active {
        color: #f5f7f7 !important;
        background: #00c2c2 !important;
      }
    }
  }
`;

export const EvaluationWrapper = styled.div`
  padding-top: 15px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 15px;
  h3 {
    font-size: 20px;
    color: #00c2c2;
    padding-bottom: 15px;
    border-bottom: 1px solid #dfe5e5;
  }
  .feedback_section {
    display: flex;
  }
`;

export const EvaluationCharacters = styled.div`
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  gap: 20px;
  padding-top: 15px;
`;

export const EvaluationCharactersItem = styled.div`
  background-color: #ebf7e6;
  width: 100%;
  padding: 10px;
  border-radius: 15px;
  > .header {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    padding-bottom: 5px;
    border-bottom: 1px solid #f5f7f7;
    margin-bottom: 5px;
    p {
      font-size: 16px;
      font-weight: 700;
      color: #49d87a;
    }
  }
  > .content {
    font-weight: 600;
    h3 {
      font-size: 14px;
      margin-bottom: 2px;
    }
    p {
      color: #949999;
      font-size: 12px;
    }
  }
  &.yellow {
    background-color: #fef1cb4d;
    > .header {
      p {
        color: #febf10;
      }
    }
  }
`;

export const SpeechAnalysisHeader = styled.div`
  .capitalise {
    text-transform: capitalize;
  }
  .transcript-wrapper {
    min-height: 110px;
    padding: 10px 12px;
    border-radius: 24px;
    background: #f5f7f7;
    width: 100%;
    margin-bottom: 20px;

    span {
      font-size: 16px;
      font-weight: 600;
      &::after {
        content: " ";
      }
      cursor: pointer;
      &.selected {
        border-radius: 32px;
        background: #e0f9e8;
        border: 1px solid #30d468;
        padding: 0 4px;
      }
      &.correct {
        color: #30d468;
      }
      &.incorrect {
        color: #f95454;
      }
    }
  }
  ul {
    display: flex;
    align-items: center;
    gap: 10px;
  }
`;

export const SpeechTitle = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;

  margin-bottom: 10px;
  .label {
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 10px;

    p {
      font-size: 14px;
      line-height: 24px;
      color: #7c8080;
    }
  }
  > div {
    display: flex;
    align-items: center;
    gap: 12px;
    button {
      width: 170px;
      height: 40px;
    }
  }
`;

export const SelectedWord = styled.p`
  color: #636666;
  font-size: 16px;
  > span {
    color: #00c2c2;
    font-size: 16px;
    font-weight: 600;
  }
`;

export const SpeechAnalysisContent = styled.div`
  width: 100%;
  padding-top: 15px;
`;

export const SpeechAnalysisContentWordSection = styled.div`
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 20px;
  width: 100%;
`;

export const SpeechAnalysisContentWordScore = styled.div`
  border-radius: 24px;
  border: 1px solid #dfe5e5;
  background: #fff;
  width: 100%;
  padding: 30px;
  height: fit-content;
  display: flex;
  flex-direction: column;
  gap: 30px;

  .label {
    color: #949999;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
  }
  .center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .progress_section {
    width: 100%;
    gap: 8px;

    > .progress_value {
      position: relative;

      > p {
        color: #f95454;
        text-align: center;
        font-size: 16.084px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-weight: 700;

        &.good {
          color: #30d468;
        }
      }
    }
  }
  h4 {
    border-radius: 12px;
    background: rgba(0, 194, 194, 0.1);
    padding: 8px 32px;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
  }
`;

export const ClarityLevelSection = styled.div`
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
`;

export const GrammarHeader = styled.div`
  .instruction {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 0 20px 10px;
    p {
      color: #7c8080;
      font-size: 14px;
      font-weight: 400;
    }
  }
`;

export const GrammarHeaderContent = styled.div`
  min-height: 120px;
  padding: 20px;
  border-radius: 24px;
  background: #f5f7f7;
  width: 100%;
  margin-bottom: 20px;
  .grammar_analysis_container {
    line-height: 22px;
    font-size: 16px;
    .issue {
      display: inline-flex;
      padding-right: 4px;
      color: #f95454;
      align-items: center;
      gap: 2px;
      cursor: pointer;
      .number {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        height: 20px;
        border-radius: 100px;
        padding: 0 6px;
        border: 1px solid #f95454;
        background: rgba(249, 84, 84, 0.2);
        font-size: 12px;
        font-weight: 700;
      }
    }
  }
  /* span {
    line-height: 22px;
    font-size: 16px;

    &.error-text {
      display: inline-flex;
      padding-right: 4px;
      color: #f95454;
      align-items: center;
      gap: 2px;
      cursor: pointer;
      > sup {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        height: 20px;
        border-radius: 100px;
        padding: 0 6px;
        border: 1px solid #f95454;
        background: rgba(249, 84, 84, 0.2);
        font-size: 12px;
        font-weight: 700;
      }
    }
  } */
`;

export const GrammarContent = styled.div`
  border-radius: 24px;
  background: #f5f7f7;
  padding: 20px;
  min-height: 219px;
  width: 100%;

  font-size: 16px;
  p {
    color: #4a4d4d;
  }

  .correct_section {
    p {
      span {
        color: #30d468;
      }
    }
  }
  .feedback_section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;

    > div {
      display: flex;
      align-items: center;
      gap: 10px;
      &.correct {
        color: #30d468;
      }
      &.failed {
        span {
          display: inline-flex;
          padding-right: 4px;
          color: #f95454;
          align-items: center;
          gap: 2px;
          cursor: pointer;
          > span {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            height: 20px;
            border-radius: 100px;
            padding: 0 6px;
            border: 1px solid #f95454;
            background: rgba(249, 84, 84, 0.2);
            font-size: 12px;
            font-weight: 700;
          }
        }
      }
    }
  }
`;

export const GrammarV2Content = styled.div`
  padding: 20px;
  width: 100%;
  border-radius: 24px;
  background: #f5f7f7;

  .correct_section {
    > .warning {
      display: flex;
      align-items: center;
      border-radius: 20px;
      background: #fff;
      width: 100%;
      height: 40px;
      gap: 8px;
      padding: 0 20px;
      color: #7c8080;
      font-size: 14px;
      font-style: italic;
      margin-bottom: 20px;
    }
    p {
      span {
        color: #30d468;
      }
    }
  }
  .feedback_section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;

    > div {
      display: flex;
      align-items: center;
      gap: 10px;
      &.correct {
        color: #30d468;
      }
      &.failed {
        span {
          display: inline-flex;
          padding-right: 4px;
          color: #f95454;
          align-items: center;
          gap: 2px;
          cursor: pointer;
          > span {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            height: 20px;
            border-radius: 100px;
            padding: 0 6px;
            border: 1px solid #f95454;
            background: rgba(249, 84, 84, 0.2);
            font-size: 12px;
            font-weight: 700;
          }
        }
      }
    }
  }
`;

export const GrammarV2HeaderContent = styled.div`
  padding: 24px;
  border-radius: 24px;
  background: #f5f7f7;
  width: 100%;
  margin-bottom: 20px;
`;

export const GrammarV2Correct = styled.div`
  > p {
    span {
      color: #4a4d4d;
      font-size: 16px;
      font-weight: 400;
    }
  }
`;

export const GrammarV2HeaderContentWrapper = styled.div`
  height: 150px;
  overflow-y: auto;

  > span {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    &.error {
      color: #f95454;
      cursor: pointer;
    }
    &.active {
      color: #f95454;
      border-radius: 5px;
      border: 0.5px solid #00c2c2;
      background: #e8fafa;
      padding: 0 3px;
    }
  }
`;
export const GrammarV2ContentWrapper = styled.div`
  height: 250px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 20px;
`;

export const GrammarV2ContentWrapperTranslate = styled.div`
  display: flex;
  justify-content: flex-end;
  width: 100%;
  > .translate-section {
    width: fit-content;
    display: inline-block;
  }
`;

export const GrammarV2Feedback = styled.div``;
export const GrammarV2FeedbackList = styled.ul`
  list-style: none;
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 28px;
  > li {
    padding-bottom: 20px;
    border-bottom: 1px solid #dfe5e5;
    &:last-child {
      border-bottom: none;
    }
    .grammar-v2_feekback_header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      border-radius: 10px;
      background: #feeeee;
      gap: 24px;
      padding: 5px 10px;
      margin-bottom: 8px;
      p {
        color: #0d7d96;
        font-size: 16px;
        &::first-letter {
          text-transform: uppercase;
        }
      }
      .grammar-v2_feekback_header-status {
        display: flex;
        align-items: center;
        gap: 5px;
        span {
          color: #f95454;
          font-size: 14px;
          font-weight: 600;
        }
      }
    }
    .grammar-v2_feekback-text {
      color: #4a4d4d;
      font-size: 14px;
    }
    .grammar-v2_feekback-correction_section {
      padding-top: 12px;

      .grammar-v2_feekback-label {
        color: #30d468;
        font-size: 16px;
        margin-bottom: 10px;
      }
    }
  }
`;

export const ComprehensionContainer = styled.ul`
  border-radius: 32px;
  background: #fff;
  padding: 20px;
  list-style: none;
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 15px;
  li {
    border-bottom: 1px solid #dfe5e5;

    padding-bottom: 15px;
    &:last-child {
      border-bottom: transparent;
    }
  }
`;

export const ComprehensionContainerResponse = styled.div`
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 10px;
  padding-bottom: 5px;
  > p {
    color: #636666;
    font-size: 14px;
    line-height: 24px;
  }
  > div {
    border-radius: 24px;
    background: #f5f7f7;
    min-height: 150px;
    padding: 10px;
    > p {
      color: #4a4d4d;

      font-size: 16px;
      line-height: 25px;
      &::first-letter {
        text-transform: capitalize;
      }
    }
  }
`;

export const ComprehensionFeekback = styled.div`
  width: 100%;
  p {
    color: #4a4d4d;
    font-size: 14px;
  }
`;

export const ComprehensionFeekbackHeader = styled.div`
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  width: 100%;
  justify-content: space-between;
  h3 {
    font-size: 16px;
    font-weight: 600;
  }
`;

export const EmptyModel = styled.div`
  width: 100%;
  height: 550px;
  border-radius: 32px;
  padding: 20px;
  background-color: #fff;
  display: grid;
  place-items: center;
`;

export const EmptyModelDesc = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  h2 {
    font-size: 20px;
    font-weight: 600;
    margin: 20px 0px 10px;
  }
  p {
    font-size: 14px;
    color: #949999;
  }
`;
