Почему в выпадающем списке обрезается первая буква?

paint .select select {
    background: none;
    border: 0;
    -webkit-apperance: none;
    apperance: none;
    font-style: italic;
    font-family: Lora;
    font-size: 20px;
    border-bottom: 1px dashed #ff8d2e;
    color: #ff8d2e;
    cursor: pointer;
    padding: 0 10px;
  }

  .select:before {
    content: '';
    position: absolute;
    transform: translateX(-60%);
    display: inline-block;
    width: 20px;
    height: 30px;
    background-color: #fff;
    
  }

  .select:after {
    content: '\25BC';
    color: #ff8d2e;
    font-size: 55%;
    position: absolute;
    top: 40%;
    pointer-events: none !important;
    transform: translateX(-50%);
    cursor: pointer;
    background-color: #fff;
    height: 30px;
    width: 22px;
  }
  
  .select {
    position: relative;
    margin-bottom: 70px;
    text-align: center;

  }

<div class="deals-section">
                        <div class="wrapper">
                            <div class="title">
                                <span>лучшие предложения</span>
                            </div>
                            <div class="paint">


                                <div class="select">
                                  
                                 <select class="tabs__caption">
                                    <option value="decoration">Декоартивная краска</option>
                                    <option value="emulsion">Эмульсионная краска</option>
                                  </select>
                                </div>
                                  
                            </div>
    </div>