@use "./variables/colors" as c;

@mixin defaultPadding {
  padding: 14px 19px;
}
.editor {
  display: flex;
  gap: 13px;

  .editor-wrapper {
    width: 100%;
    position: relative;
    background: #e5e5e5;
    border-radius: 15px;

    .emoji_picker {
      position: absolute;
      z-index: 1;
      transform: translate(10px, 10px);
      margin-left: 50%;
      margin-top: -15%;

      @media only screen and (max-width: 1700px) {
        margin-top: -19%;
      }
      @media only screen and (max-width: 1600px) {
        margin-top: -21%;
      }
      @media only screen and (max-width: 1500px) {
        margin-top: -24%;
      }
    }

    .editor_area {
      background: #fff;
      border-radius: 15px;

      input {
        border-radius: 12px;
        background: #fff;
        outline: none;
        border: none;
        width: 100%;
        height: 30px;
        font-size: 20px;
        font-weight: 500;
        padding-left: 30px;
        border: "none";
        margin-top: 20px;
      }
      .editable {
        border-radius: 25px;
        padding: 20px 30px;
        background: #fff;
        // background: #e5e5e5;
        min-height: 193px;
      }
    }

    .bottom {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 80%;

      .emoji_button {
        background-color: white;
        border: none;
        cursor: pointer;
        padding: 5px;
        margin-top: 6px;
        margin-right: 20px;
        border-radius: 50%;
        // opacity: 0.6;
      }

      .emoji_button_active {
        background-color: #fff;
        color: #00c2c2;
        border: none;
        cursor: pointer;
        padding: 3px;
        margin-top: 6px;
        margin-right: 20px;
        // border-radius: 50%;
        svg path {
          stroke: #00c2c2;
        }
        // border-radius: 20px;
      }

      & > button {
        @media only screen and (max-width: 1400px) {
          font-size: 17px !important;
          font-weight: 700;
        }
        @media only screen and (max-width: 1366px) {
          font-size: 15px !important;
          font-weight: 600;
        }
      }

      .tool-bar {
        display: flex;
        margin: auto;
        margin-top: 16px;
        margin-right: 20px;
        padding: 16px;
        background: #fff;
        border: 0px solid c.$neutral-20;
        border-radius: 12px;
        width: 70%;
        height: 60px;
        // gap: 5px;

        align-items: center;
        .list {
          display: grid;
          // grid-template-columns: 1fr 1fr;
          gap: 2px;
          & > div {
            display: grid;
            cursor: pointer;
          }
          .active {
            color: #00c2c2;
            svg path {
              // stroke: #00C2C2;
              stroke: #00c2c2;
            }
          }
        }

        .active {
          opacity: 1;
        }

        .font {
          .font-dd {
            div {
              border-width: 0px;
              min-width: 215px;
            }
            p {
              margin-right: 25px;
              font-weight: 700;
            }
          }
        }
        .font-size {
          .sizes {
            div {
              border-width: 0px;
              // z-index: 999;
              .iVkqGn {
                padding: 11px 10px;
              }
            }
            p {
              margin-right: 25px;
              font-weight: 700;
            }
          }
        }
        & > div {
          border-right: 1px solid c.$neutral-10;
          padding: 0 6px;
        }
        .font-style {
          display: flex;
          gap: 5px;
          & > div {
            display: grid;
            cursor: pointer;
            // svg{
            //   fill: #00C2C2;
            // }
          }

          .active {
            color: #00c2c2;
            svg path {
              // fill: #00C2C2;
              stroke: #00c2c2;
            }
          }
        }
        .color-box {
          .wrap {
            position: relative;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 7px;
            input {
              position: absolute;
              pointer-events: none;
              opacity: 0;
            }
            .indicator {
              width: 24px;
              height: 24px;
              border-radius: 50%;
            }
          }
        }
        .alignments {
          display: grid;
          grid-template-columns: 1fr 1fr 1fr;
          gap: 16px;
          cursor: pointer;
          & > div {
            display: grid;
          }
          .active {
            color: #00c2c2;
            svg path {
              // fill: #00C2C2;
              stroke: #00c2c2;
            }
          }
        }
      }
    }
    .options {
      min-width: 40px;
      display: grid;
      align-content: start;
      gap: 20px;
      span {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: grid;
        align-content: center;
        justify-items: center;
        background-color: c.$error;
        cursor: pointer;
        &:nth-of-type(1) {
          background-color: c.$primary-color-main;
        }
      }
    }
  }
}
