$sizes: "small", "medium", "large";
$themeColors: "primary", "secondary", "custom";
$stateColors: "success", "warning", "error";

@mixin useTheme($theme-name, $theme-var) {
  .#{$theme-name} {
    @each $size in $sizes {
      $i: index($sizes, $size);

      .#{$size} {
        // color: black;
        font-size: map-get(map-get($theme-var, $size), "font-size");
        line-height: map-get(map-get($theme-var, $size), "line-height");
        letter-spacing: -0.1px;

        .otp {
          height: map-get(map-get($theme-var, $size), "input");
          width: map-get(map-get($theme-var, $size), "input");
          font-size: map-get(map-get($theme-var, $size), "otp-font-size");
        }

        input,
        div[dataWidget-item="dropdown-menu"] {
          height: map-get(map-get($theme-var, $size), "input");
        }

        button {
          height: map-get(
            map-get(map-get($theme-var, $size), "button"),
            "height"
          );
          border-radius: map-get(
            map-get($theme-var, "configs"),
            "border-radius"
          );
          padding: map-get(
            map-get(map-get($theme-var, $size), "button"),
            "padding"
          );
        }

        .material-icons,
        .material-icons-round {
          font-size: map-get(map-get($theme-var, $size), "icon");
          flex-shrink: 0;
        }
        .icon {
          height: map-get(map-get($theme-var, $size), "icon");
          width: map-get(map-get($theme-var, $size), "icon");
        }

        .info {
          height: map-get(map-get($theme-var, $size), "info-icon");
          width: map-get(map-get($theme-var, $size), "info-icon");
          font-size: map-get(map-get($theme-var, $size), "info-icon");
          line-height: 20px;
        }

        .tel-input-arrow {
          height: map-get(map-get($theme-var, $size), "tel-input-arrow");
          width: map-get(map-get($theme-var, $size), "tel-input-arrow");
        }

        .dropdown-arrow {
          height: map-get(map-get($theme-var, $size), "dropdown-arrow");
          width: map-get(map-get($theme-var, $size), "dropdown-arrow");
        }

        .padding-icon {
          padding: map-get(
            map-get(map-get($theme-var, $size), "button"),
            "padding-icon"
          );
        }

        .k-border-input {
          border: map-get(
              map-get(map-get($theme-var, "colors"), "input"),
              default
            )
            solid
            map-get(map-get($theme-var, $size), "border-width");
          path,
          .material-icons,
          .material-icons-round {
            fill: map-get(
              map-get(map-get($theme-var, "colors"), "input"),
              default
            );
            color: map-get(
              map-get(map-get($theme-var, "colors"), "input"),
              default
            );
          }

          &:hover {
            border: map-get(
                map-get(map-get($theme-var, "colors"), "input"),
                hover
              )
              solid
              map-get(map-get($theme-var, $size), "border-width");
            path,
            .material-icons,
            .material-icons-round {
              fill: map-get(
                map-get(map-get($theme-var, "colors"), "input"),
                hover
              );
              color: map-get(
                map-get(map-get($theme-var, "colors"), "input"),
                hover
              );
            }
          }

          &:focus-within,
          &:active {
            border: map-get(
                map-get(map-get($theme-var, "colors"), "input"),
                focused
              )
              solid
              map-get(map-get($theme-var, $size), "border-width");
            path,
            .material-icons,
            .material-icons-round {
              fill: map-get(
                map-get(map-get($theme-var, "colors"), "input"),
                focused
              );
              color: map-get(
                map-get(map-get($theme-var, "colors"), "input"),
                focused
              );
            }
          }
        }

        @each $color in $stateColors {
          .k-border-#{$color} {
            border: map-get(
                map-get(map-get($theme-var, "colors"), "input"),
                $color
              )
              solid
              map-get(map-get($theme-var, $size), "border-width");
          }
          .k-fill-#{$color} {
            path,
            .material-icons,
            .material-icons-round {
              color: map-get(
                map-get(map-get($theme-var, "colors"), "input"),
                $color
              );
            }
          }
        }

        @each $color in $themeColors {
          $clr: map-get(
            map-get(map-get(map-get($theme-var, "colors"), "button"), $color),
            default
          );
          $hover-clr: map-get(
            map-get(map-get(map-get($theme-var, "colors"), "button"), $color),
            hover
          );

          .k-bg-#{$color} {
            background-color: $clr;
          }

          .k-outline-#{$color} {
            color: $clr;
            border: $clr
              solid
              map-get(map-get($theme-var, $size), "border-width");
            path {
              fill: $clr;
            }
          }

          .btn-#{$color} {
            &:hover {
              background-color: $hover-clr;
            }

            &:active {
              border: rgba(255, 255, 255, 0.6)
                solid
                map-get(map-get($theme-var, $size), "border-width");
            }
          }

          .btn-outline-#{$color} {
            &:hover {
              color: $hover-clr;
              border-color: $hover-clr;
              path {
                fill: $hover-clr;
              }
            }

            &:active {
              background-color: $clr;
              background-image: linear-gradient(
                0deg,
                rgba(255, 255, 255, 0.95) 0%,
                rgba(255, 255, 255, 0.95) 100%
              );
            }
          }
          .k-btn-text {
            border: transparent
              solid
              map-get(map-get($theme-var, $size), "border-width");

            &:hover {
              background-color: map-get(
                map-get($theme-var, "colors"),
                "disabled-bg"
              );
            }
            &:active {
              border-color: #ccc;
            }
          }
        }
      }

      .k-border-disabled {
        border: map-get(map-get($theme-var, "colors"), "disabled-bg")
          solid
          map-get(map-get($theme-var, $size), "border-width");
      }
    }

    @each $color in $themeColors {
      .k-header-#{$color} {
        color: map-get(
          map-get(map-get(map-get($theme-var, "colors"), "header"), $color),
          text
        );
        background-color: map-get(
          map-get(map-get(map-get($theme-var, "colors"), "header"), $color),
          bg
        );
      }
      .k-text-#{$color} {
        color: map-get(map-get(map-get($theme-var, "colors"), "text"), $color);
      }
      .k-border-#{$color} {
        border-color: map-get(
          map-get(map-get(map-get($theme-var, "colors"), "button"), $color),
          border-color
        );
      }
      .k-border-t-#{$color} {
        border-top-color: map-get(
          map-get(map-get(map-get($theme-var, "colors"), "button"), $color),
          default
        );
      }
    }

    .k-fill-white path {
      fill: #fff;
    }
    .k-fill-black path {
      fill: #000 !important;
    }
    .k-fill-disabled path {
      fill: map-get(map-get($theme-var, "colors"), "disabled-text");
    }

    .k-bg-disabled {
      background-color: map-get(map-get($theme-var, "colors"), "disabled-bg");
    }

    .k-text-disabled,
    input::placeholder,
    textarea::placeholder {
      color: map-get(map-get($theme-var, "colors"), "disabled-text");
    }

    .k-rounded {
      border-radius: map-get(map-get($theme-var, "configs"), "border-radius");
    }
    .k-rounded-t {
      border-radius: map-get(map-get($theme-var, "configs"), "border-radius")
        map-get(map-get($theme-var, "configs"), "border-radius") 0 0;
    }
    .k-rounded-b {
      border-radius: 0 0
        map-get(map-get($theme-var, "configs"), "border-radius")
        map-get(map-get($theme-var, "configs"), "border-radius");
    }
    .k-rounded-l {
      border-radius: map-get(map-get($theme-var, "configs"), "border-radius") 0
        0 map-get(map-get($theme-var, "configs"), "border-radius");
    }
    .k-rounded-r {
      border-radius: 0 map-get(map-get($theme-var, "configs"), "border-radius")
        map-get(map-get($theme-var, "configs"), "border-radius") 0;
    }
  }
}