استایل CSS کاستومایز کردن فلش SELECT

      input,
      select {
        background-color: white;
        border: 1px solid $green;
        outline: none;
        font-size: 16px;
        min-height: 50px;
        color: $blue;
        width: 100%;
        border-radius: 8px;
        transition: 0.3s all ease-out;
        appearance: none; /* حذف فلش پیش‌فرض مرورگر */
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='21' height='14' viewBox='0 0 21 14' transform='rotate(180)'><path d='M8.6707 2.15433C9.62057 1.30215 11.0598 1.30215 12.0097 2.15433L18.2163 7.72263C19.9232 9.25398 18.8399 12.0835 16.5468 12.0835L4.13358 12.0835C1.84044 12.0835 0.7572 9.25398 2.46409 7.72263L8.6707 2.15433Z' fill='%23000333' stroke-linejoin='round'/></svg>");
        background-repeat: no-repeat;
        background-position: calc(100% - 15px) center; /* کمی فاصله از سمت راست */
        background-size: 12px; /* اندازه فلش */

        &:focus {
          border-color: $green;
        }

        &.error {
          border-color: $red;
        }
      }