.q-country-code-select
  padding: 0

.q-country-code-select--readonly
  pointer-events: none

.q-country-code-select__selected + .q-btn-dropdown__arrow
  margin-left: 0

.q-country-code-select__options
  min-width: 200px
  padding-bottom: 0.4em

.q-country-code-select__search
  padding-top: 0.4em
  padding-bottom: 0.4em
  .q-input
    width: 100%

.q-country-code-select__option
  padding: 0 0.4em

.q-country-code-option
  display: flex
  flex-wrap: no-wrap
  align-items: center

// More specific to avoid using !important curse
.q-country-code-option
  .q-country-code-option__flag.q-country-code-option__flag--basic
    transform: scale(0.36)
    margin: -1em -0.8em -0.9em -0.4em
    flex-shrink: 0

.q-country-code-option__flag--unknown
  position: relative
  &::after
    content: ''
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    background-color: #696969
    z-index: 1