@use '../../../config.scss' as *;

.settings-input-content {
  .btn-wrapper {
    position: relative;
    display: flex;
    justify-content: end;

    .btn-customizer {
      position: absolute;
      margin-top: 0.5rem;
      padding-bottom: 3rem;
      top: 100%;
      right: 0;
      z-index: 1;
      cursor: auto;

      .btn-customizer-menu {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        position: relative;
        background: rgb(13, 0, 23);
        border-radius: 0.15rem;
        padding: 0.5rem 0;

        .btn-customizer-menu-items {
          padding: 0 0.5rem;
          border-right: 0.063rem solid #cccccc4e;
          color: $color-white;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;

          &:last-child {
            border: none;
          }

          .color-img {
            width: 1.2rem;
            height: 1.2rem;
            border-radius: $border-radius-small;
            background: #90EE90;
            background: linear-gradient(to top left, #90EE90 0%, #FFFFFF 50%, #FF47D0 100%), linear-gradient(to bottom left, #FFFF00 0%, #FFFFFF 50%, #0000FF 100%);
          }

          i {
            color: $color-white;
            font-size: 1.2rem;
          }
          .adminLib-link{
            font-size: 1.7rem;
          }
        }
      }

      .customizer-setting-wrapper {
        position: relative;
        top: 0.315rem;
        background: #f8f8f8;
        width: 17.64rem;
        padding: 1rem;
        border: 0.125rem solid rgba($color: #000000, $alpha: 0.125);
        box-shadow: 0 0.25rem 0.5rem rgba($color: #000000, $alpha: 0.125);
        border-radius: $border-radius-small;


        .wrapper-close {
          color: $color-active;
          padding: 0;
          position: absolute;
          right: -0.756rem;
          top: -0.945rem;
          background: $color-white;
          box-shadow: 0 0.25rem 0.5rem rgba($color: #000000, $alpha: 0.125);
          border-radius: 50%;
          width: 1.688rem;
          height: 1.688rem;
          font-size: 1.25rem;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        input[type=color] {
          cursor: pointer;
        }
        
        .section-wrapper {
          display: flex;
          flex-direction: column;
          gap: 0.75rem;

          .simple {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;

            .section {
              display: flex;
              flex-direction: column;
              gap: 0.5rem;

              &.section-row{
                flex-direction: row;
                justify-content: space-between;
                align-items: center;

                .property-section{
                  width: 30%;
                  align-items: center;
                  justify-content: center;

                  input::-webkit-outer-spin-button,
                  input::-webkit-inner-spin-button {
                    opacity: 1;
                    -webkit-appearance: none;
                  }
                  
                  input[type=number] {
                    -moz-appearance: textfield;
                  }   
                }
              }

              .lable {
                color: #000;
                font-weight: 400;
              }

              .property-section {
                display: flex;
                gap: 0.5rem;
                width: 100%;

                input{
                  width: 100%;
                }

                input[type="text"] {
                  background: transparent;
                }

                input[type="color"] {
                  background: transparent;
                  border: none;
                  outline: none;
                  width: 2.646rem;
                  height: 2.016rem;
                  padding: 0;
                }
              }
            }

            .link-box {
              width: 100%;
              display: flex;
              border: 0.063rem solid #d4d1d9;
              align-items: center;
              gap: 0.25rem;
              padding: 0.25rem;
              border-radius: $border-radius-small;

              .link-input {
                border: none;
                outline: none;
                background: transparent;
              }

              button {
                background: transparent;
              }
            }
          }

          .hover {
            background-color: #f2eff5;
            padding: 0.5rem;
            border-radius: $border-radius-small;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;

            .section {
              display: flex;
              flex-direction: column;
              gap: 0.5rem;

              .lable {
                color: #000;
                font-weight: 400;
              }

              .property-section {
                display: flex;
                gap: 0.5rem;

                input[type="text"] {
                  background: transparent;
                }

                input[type="color"] {
                  background: transparent;
                  border: none;
                  outline: none;
                  width: 2.646rem;
                  height: 2.016rem;
                  padding: 0;
                }
              }
            }
          }
        }

        .link {
          p {
            font-size: 0.73rem;

            span {
              color: red;
              font-weight: 800;
              padding-right: 0.126rem;
            }
          }
        }
      }
    }

    .btn-preview {
      &.active,
      &:hover {
        box-shadow:
          0.0rem 0.0rem 0.0rem 0.126rem rgb(255, 255, 255), 0.0rem 0.0rem 0.0rem 0.189rem rgba(33, 33, 33, 0.5) !important; // // To make as a selectable and overwrite for prevent all button
      }
    }
  }
}