@import '../variable';

/* common*/
.checkbox {
  display: none;
}

.checkbox:disabled + label {
  cursor: not-allowed;
}

.checkbox + label {
  color: $color-main-grey-text;
  cursor: pointer;
  font-family: Circe;
  font-size: 14px;
}

._color-black {
  .checkbox + label {
    color: inherit;
  }
}

/* green*/
.checkbox-green + label:before {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cmVjdCB4PSIwLjUiIHk9IjAuNSIgd2lkdGg9IjE1IiBoZWlnaHQ9IjE1IiByeD0iMi41IiBmaWxsPSJ3aGl0ZSIgc3Ryb2tlPSIjOUI5QjlCIi8+Cjwvc3ZnPgo=);
  content: '';
  display: inline-block;
  height: 20px;
  width: 20px;
  background-repeat: no-repeat;
  background-position-x: center;
  margin: 0 10px -5px 0;
}

.checkbox-green:checked + label:before {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNMC41IDNDMC41IDEuNjI0NTQgMS42MjkxIDAuNSAzLjAzMzcxIDAuNUgxMi45NjYzQzE0LjM3MDkgMC41IDE1LjUgMS42MjQ1NCAxNS41IDNWMTNDMTUuNSAxNC4zNzU1IDE0LjM3MDkgMTUuNSAxMi45NjYzIDE1LjVIMy4wMzM3MUMxLjYyOTEgMTUuNSAwLjUgMTQuMzc1NSAwLjUgMTNWM1oiIGZpbGw9IndoaXRlIiBzdHJva2U9InVybCgjcGFpbnQwX2xpbmVhcikiLz4KICA8cGF0aCBkPSJNMy4wMzM3MSAwLjVDMS42NDU4NyAwLjUgMC41MTEyMzYgMS42MTQwNCAwLjUxMTIzNiAzVjEzQzAuNTExMjM2IDE0LjM4NiAxLjY0NTg3IDE1LjUgMy4wMzM3MSAxNS41QzEuNjI5MSAxNS41IDAuNSAxNC4zNzU1IDAuNSAxM1YzQzAuNSAxLjYyNDU0IDEuNjI5MSAwLjUgMy4wMzM3MSAwLjVaTTEyLjk2NjMgMTUuNUMxNC4zNTQxIDE1LjUgMTUuNDg4OCAxNC4zODYgMTUuNDg4OCAxM1YzQzE1LjQ4ODggMS42MTQwNCAxNC4zNTQxIDAuNSAxMi45NjYzIDAuNUMxNC4zNzA5IDAuNSAxNS41IDEuNjI0NTQgMTUuNSAzVjEzQzE1LjUgMTQuMzc1NSAxNC4zNzA5IDE1LjUgMTIuOTY2MyAxNS41WiIgZmlsbD0id2hpdGUiIHN0cm9rZT0idXJsKCNwYWludDFfbGluZWFyKSIvPgogIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNTk0MSA0LjY3ODE3QzExLjQ4MjMgNC41NjQzMSAxMS4zMDAyIDQuNTY0MzEgMTEuMTg5MiA0LjY3ODE3TDYuOTIxNjUgOC45NzM1N0M2LjgwOTgyIDkuMDg4MiA2LjYyNzM4IDkuMDg4MiA2LjUxNjMxIDguOTczNTdMNC42NDY0OCA3LjA0Nzk5QzQuNTkxMTQgNi45OTA4NyA0LjUxODYyIDYuOTYyNjkgNC40NDU3MiA2Ljk2MjMxQzQuMzcyMDUgNi45NjE5MiA0LjI5NzI1IDYuOTkwMSA0LjI0MTE0IDcuMDQ3OTlMMy40MTQ4MSA3Ljc5OTA4QzMuMzU5ODUgNy44NTYyIDMuMzMwMDggNy45Mjc2MSAzLjMzMDA4IDguMDAyMUMzLjMzMDA4IDguMDc2OTggMy4zNTk4NSA4LjE1NTMzIDMuNDE1MTkgOC4yMTIwNkw1LjMwMDY3IDEwLjIxMjlDNS40MTIxMiAxMC4zMjcyIDUuNTk0OTUgMTAuNTEyNCA1LjcwNjAxIDEwLjYyNTlMNi41MTY2OSAxMS40NTIyQzYuNjI4MTQgMTEuNTY1MyA2LjgxMDIgMTEuNTY1MyA2LjkyMjAzIDExLjQ1MjJMMTIuNDA1MiA1LjkxNzVDMTIuNTE3IDUuODA0MDMgMTIuNTE3IDUuNjE3NjEgMTIuNDA1MiA1LjUwNDEzTDExLjU5NDEgNC42NzgxN1oiIGZpbGw9InVybCgjcGFpbnQyX2xpbmVhcikiLz4KICA8ZGVmcz4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQwX2xpbmVhciIgeDE9IjE2IiB5MT0iMTYiIHgyPSIxNiIgeTI9IjAiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzFDQjZCMSIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM3QkU2QjkiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MV9saW5lYXIiIHgxPSIxNiIgeTE9IjE2IiB4Mj0iMTYiIHkyPSIwIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiMxQ0I2QjEiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjN0JFNkI5Ii8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDJfbGluZWFyIiB4MT0iMTIuNDg5MSIgeTE9IjExLjUzNzEiIHgyPSIxMi40ODkxIiB5Mj0iNC41OTI3NyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjMUNCNkIxIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzdCRTZCOSIvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICA8L2RlZnM+Cjwvc3ZnPgo=);
}

/* slide*/
.checkbox-slide + label {
  position: relative;
  display: inline-block;
  width: 54px;
  height: 24px;
  background-color: $color-main-grey-background;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease-out;
  box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.1) inset;
}

.checkbox-slide + label::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 100%;
  background-color: white;
  position: absolute;
  top: 5px;
  left: 4px;
  transition: all 0.3s ease-out;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
}

.checkbox-slide + label::after {
  content: attr(data-deny);
  color: white;
  position: absolute;
  top: 4px;
  right: 5px;
  font-size: 12px;
  transition: all 0.3s ease-out;
}

.checkbox-slide:checked + label {
  background-color: $color-additional-green;
}

.checkbox-slide:checked + label::before {
  left: 36px;
}

.checkbox-slide:checked + label::after {
  content: attr(data-permit);
  left: 10px;
}