
$icon-size: 20px;

.skillbox-input {
  @include inputstyle;

  &--error {
    border-color: $color-accent-3-dark;
  }

}

.skillbox-dropdown {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-indent: 1px;
  text-overflow: '';
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="%2317A887" d="M50,74.07,6.86,30.93A2.93,2.93,0,0,1,11,26.79l39,39,39-39a2.93,2.93,0,1,1,4.15,4.15Z"/></svg>');
  background-repeat: no-repeat;
  background-position: 97% center;
  background-size: 24px 24px;
  position: relative;
}

.skillbox-textarea {
  @include inputstyle;
  height: 120px;
}

.skillbox-auto-grow {
  @include auto-grow;
}

.base-input-container {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  margin-right: 10px;
  cursor: pointer;
  width: auto;

  svg {
    width: 15px;
  }

  &__input {
    display: none;
  }

  &__input:checked + &__checkbox {
    border: 0;
    background-color: $color-brand;

    svg {
      display: block;
      fill: $color-white;
    }
  }

  &__icon {
    width: $icon-size;
    height: $icon-size;
    overflow: hidden;
    display: flex;
    border: 2px solid $color-silver-dark;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    margin-right: 10px;
    transition: background-color 0.5s;
  }

  &__checkbox {
    border-radius: 3px;

    svg {
      display: none;
      transition: all 0.7s;
    }
  }

  &__radiobutton {
    border-radius: 20px;

    svg {
      display: none;
      fill: $color-brand;
      width: 12px;
    }
  }

  &__input:checked + &__radiobutton {
    border-color: $color-brand;

    svg {
      display: block;
    }
  }

  &__label {
    @include regular-text;
  }

  $base: &;

  &--survey {
    margin-bottom: $small-spacing;

    #{$base}__input:checked + #{$base}__radiobutton {
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle fill="%2317A887" r="25" cx="50" cy="50"></circle></svg>');
      background-size: 12px 12px;
      background-repeat: no-repeat;
      background-position: 50% 50%;
      width: $icon-size;
      height: $icon-size;
    }

    #{$base}__input:checked + #{$base}__checkbox {
      background-image: url('data:image/svg+xml;utf8,<svg id="shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon fill="%23FFFFFF" points="41.46 77.72 10 46.26 16.89 39.37 41.46 63.93 83.11 22.28 90 29.18 41.46 77.72"/></svg>');
      background-size: 12px 12px;
      background-repeat: no-repeat;
      background-position: 50% 50%;
      width: $icon-size;
      height: $icon-size;
    }

    #{$base}__label-container {
      display: -ms-grid;
      display: grid;
      grid-template-columns: 30px 1fr;
      align-items: start;
      justify-content: center;
    }

    #{$base}__label {
      grid-row: 1;
      grid-column: 2;
      line-height: 1.5;
    }

    #{$base}__radiobutton {
      margin-top: 1px;
    }
  }

  &--matrix {
    margin: 0;

    #{$base}__label-container {
      display: flex;
      justify-content: flex-start;
    }
  }
}
