select.form-control {
  cursor: pointer;
  padding: 0.3rem 0.75rem;

  &[disabled] {
    cursor: default;
  }

  &[multiple] {
    height: auto;
    padding: 0;

    @media (pointer: coarse) {
      height: 2.5rem;
      padding: 0.5rem 0.75rem;
    }

    option {
      padding: 0.5rem 0.75rem;
    }
  }
}

.form-material .form-field:not(.form-default) .form-control:not([multiple]) {
  background-position: right -0.25rem center;
}

select.form-control:not([multiple]),
.form-custom-select .form-control {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%20aria-hidden%3D'true'%20focusable%3D'false'%20width%3D'1.5rem'%20height%3D'1.5rem'%20style%3D'-ms-transform%3A%20rotate(360deg)%3B%20-webkit-transform%3A%20rotate(360deg)%3B%20transform%3A%20rotate(360deg)%3B'%20preserveAspectRatio%3D'xMidYMid%20meet'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M8.12%209.29L12%2013.17l3.88-3.88a.996.996%200%201%201%201.41%201.41l-4.59%204.59a.996.996%200%200%201-1.41%200L6.7%2010.7a.996.996%200%200%201%200-1.41c.39-.38%201.03-.39%201.42%200z'%20fill%3D'%23626262'%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-origin: content-box;
  background-position: right -0.75rem center;
}

.form-custom-select {
  width: 100%;

  .form-control {
    display: flex;
    align-items: center;
    padding: 0.5rem;
    white-space: nowrap;
    overflow-x: hidden;
    background-position: right 0 center !important;
    cursor: pointer;
  }

  label {
    margin-left: 0 !important;
    color: inherit !important;
  }

  .dropdown {
    width: 100%;

    label {
      font-size: inherit !important;
      transition: none !important;
    }

    .dropdown-content {
      overflow-y: auto;
      margin-top: var(getCssVar(form-material-active-border-width));

      .dropdown-item {
        position: relative;
        cursor: pointer;
        background-color: inherit !important;
        transition: color 0.2s ease;
        will-change: color;

        &::before {
          content: '';
          position: absolute;
          background-color: currentColor;
          opacity: 0;
          pointer-events: none;
          left: 0;
          right: 0;
          bottom: 0;
          top: 0;
          transition: opacity 0.2s ease;
          will-change: opacity;
        }

        &.form-selected {
          color: var(getCssVar(form-material-color));
        }

        &.form-disabled {
          color: rgba(0, 0, 0, 0.3);
          cursor: default;
          pointer-events: none;

          &::before {
            opacity: 0.1;
          }
        }

        &:hover,
        &.form-selected,
        &:focus {
          &::before {
            opacity: 0.12;
          }
        }
      }
    }

    .form-check input {
      margin-right: 0.2rem;
    }
  }
}

.form-material.form-material-bordered .form-field.is-focused:not(.active) .form-custom-select + label {
  margin-top: 0 !important;
}