@import "./theme.scss";

.ai-works {
  width: 100vw;
  min-height: 100vh;

  .ai-works-container {
    width: 100%;
    max-width: 700px;
    padding: 100px 0;
    margin: auto;

    .ai-works-tab {
      display: flex;

      .ai-works-left-border {
        width: 2px;
        border-radius: $defaultBorder;
        background-color: $themeColor2;

        .ai-works-left-border-selection {
          width: 100%;
          height: 42px;
          background-color: $themeColor4;
          transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
        }
      }

      .ai-works-tab-left {
        .ai-works-tab-left-button {
          width: 100%;
          padding: 10px 20px 10px 10px;
          white-space: nowrap;
          font-size: 14px;
          line-height: 14px;
          height: 42px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          cursor: pointer;
          color: $themeColor3;
        }

        .ai-works-tab-left-button-selected {
          color: $themeColor4;
        }
      }

      .ai-works-tab-right {
        flex: 1;
        color: $themeColor3;

        .ai-works-tab-right-title {
          margin-bottom: 2px;
          font-size: 22px;
          font-weight: 600;
          line-height: 1.3;
        }

        .ai-works-tab-right-duration {
          margin-bottom: 20px;
          font-size: 13px;
        }

        .ai-works-tab-right-list {
          .ai-works-tab-right-list-item {
            margin-bottom: 10px;
            font-size: 14px;
            padding-left: 25px;
            line-height: 20px;

            &::before {
              content: "▹";
              color: $themeColor4;
              font-size: 18px;
              line-height: 18px;
              position: absolute;
              margin-left: -25px;
            }
          }


          .ai-works-tab-right-list-item:last-child{
            margin-bottom: 24px;
          }
        }
      }
    }
  }
}
