/* Icon sets list */

#ds_icon_expansion-settings .agsdi-load-icon-sets-wrapper {
  display         : flex;
  flex-wrap       : wrap;
  justify-content : flex-start;
  align-items     : flex-start;
  margin          : 20px -10px 25px;

  input[type="checkbox"] {
    position         : absolute;
    top              : 7px;
    right            : 7px;
    background-color : $lightBorderColor;
    margin           : 0 !important;
    border-radius    : 50%;
    opacity          : 0;
    transition       : all ease-in-out 0.2s;
    box-shadow       : none !important;

    &:hover, &:focus, &:checked {
      box-shadow : none !important;
      outline    : none !important;
      }

    &:checked {
      background-color : $seaGreen;
      opacity          : 1;
      }

    &.agsdi_icons_input:disabled {
      display : none;
      }
    }

  label {
    width     : 100%;
    max-width : 190px;
    margin    : 0 10px 25px;
    position  : relative;
    padding   : 0;
    }

  .ds_icon_expansion_pro {
    position : absolute;
    right    : 7px;
    top      : 7px;
    cursor   : default;
    }

  .agsdi-icon-set-name {
    font-weight      : 500;
    display          : block;
    text-align       : center;
    line-height      : 1.5;
    transition       : all ease-in-out 0.2s;
    padding          : 20px 12px 15px;
    border           : 3px solid transparent;
    border-radius    : 4px;
    background-color : $lightBorderColor;
    overflow         : hidden;

    &:before {
      display     : block;
      margin      : 0 auto 15px;
      width       : 100%;
      max-width   : 145px;
      line-height : 0;
      }
    }

  label:hover .agsdi-icon-set-name {
    border-color : #E6E7E8;
    }

  input[type="checkbox"]:checked ~ .agsdi-icon-set-name,
  input[type="checkbox"]:checked + .agsdi-icon-set-name {
    border-color : $seaGreen;
    }

  input[type="checkbox"].agsdi_icons_preview + .agsdi-icon-set-name {
    cursor : default;
    }

  input[type="checkbox"].agsdi_icons_input:disabled + .agsdi-icon-set-name,
  input[type="checkbox"].agsdi_icons_preview:disabled + .agsdi-icon-set-name {
    border-color : transparent !important;
    opacity      : 0.5;
    cursor       : default;

    &:before {
      opacity : 0.75;
      }
    }

  input[name="agsdi_fa_icons"] + .agsdi-icon-set-name:before {
    content : url(../admin/icon-packs/single_color_fontawesome.svg);
    }

  input[name="agsdi_mc_icons"] + .agsdi-icon-set-name:before {
    content : url(../admin/icon-packs/multicolor_multicolor.svg);
    }

  input[name="agsdi_md_icons"] + .agsdi-icon-set-name:before {
    content : url(../admin/icon-packs/single_color_material.svg);
    }

  input[name="agsdi_ui_icons"] + .agsdi-icon-set-name:before {
    content : url(../admin/icon-packs/single_color_universal.svg);
    }

  input[name="agsdi_fo_icons"] + .agsdi-icon-set-name:before {
    content : url(../admin/icon-packs/single_color_300_free.svg);
    }

  input[name="agsdi_np_icons"] + .agsdi-icon-set-name:before {
    content : url(../admin/icon-packs/single_color_hand_drawn.svg);
    }

  input[name="agsdi_cs_icons"] + .agsdi-icon-set-name:before {
    content : url(../admin/icon-packs/single_color_lineal.svg);
    }

  input[name="agsdi_out_icons"] + .agsdi-icon-set-name:before {
    content : url(../admin/icon-packs/single_color_outline.svg);
    }

  input[name="agsdi_ske_icons"] + .agsdi-icon-set-name:before {
    content : url(../admin/icon-packs/single_color_sketch.svg);
    }

  input[name="agsdi_ele_icons"] + .agsdi-icon-set-name:before {
    content : url(../admin/icon-packs/single_color_elegant.svg);
    }

  input[name="agsdi_fil_icons"] + .agsdi-icon-set-name:before {
    content : url(../admin/icon-packs/single_color_filled.svg);
    }

  input[name="agsdi_mul_icons"] + .agsdi-icon-set-name:before {
    content : url(../admin/icon-packs/multicolor_multicolor.svg);
    }

  input[name="agsdi_etl_icons"] + .agsdi-icon-set-name:before {
    content : url(../admin/icon-packs/single_color_elegant-themes-line.svg);
    }

  input[name="agsdi_eth_icons"] + .agsdi-icon-set-name:before {
    content : url(../admin/icon-packs/single_color_elegant-themes.svg);
    }

  /* multicolor */
  input[name="agsdi_mul_ele_icons"] + .agsdi-icon-set-name:before {
    content : url(../admin/icon-packs/multicolor_elegant.svg);
    }

  input[name="agsdi_mul_fil_icons"] + .agsdi-icon-set-name:before {
    content : url(../admin/icon-packs/multicolor_filled.svg);
    }

  input[name="agsdi_mul_han_icons"] + .agsdi-icon-set-name:before {
    content : url(../admin/icon-packs/multicolor_hand-drawn.svg);
    }

  input[name="agsdi_mul_lin_icons"] + .agsdi-icon-set-name:before {
    content : url(../admin/icon-packs/multicolor_lineal.svg);
    }

  input[name="agsdi_mul_out_icons"] + .agsdi-icon-set-name:before {
    content : url(../admin/icon-packs/multicolor_outline.svg);
    }

  input[name="agsdi_mul_ske_icons"] + .agsdi-icon-set-name:before {
    content : url(../admin/icon-packs/multicolor_sketch.svg);
    }

  input[name="agsdi_mul_uni_icons"] + .agsdi-icon-set-name:before {
    content : url(../admin/icon-packs/multicolor_universal.svg);
    }

  input[name="agsdi_mul_tri_icons"] + .agsdi-icon-set-name:before {
    content : url(../admin/icon-packs/multicolor_tri-color.svg);
    }

  input[name="agsdi_mul_mul_icons"] + .agsdi-icon-set-name:before {
    content : url(../admin/icon-packs/multicolor_multicolor.svg);
    }

  label.agsdi-icon-set-new .agsdi-icon-set-name:before {
    content : url(../admin/icon-packs/plus_icon.svg);
    }

  label.agsdi-icon-set-new:hover .agsdi-icon-set-name{
    border-color: #6e64ff;
    }
  label.agsdi-icon-set-new .agsdi-icon-set-name{
    padding-top: 35px;
    }
  }


#ds_icon_expansion-settings-custom .agsdi-load-icon-sets-wrapper {
	.agsdi-icon-set-name {
		padding-top: 62px;
	}

	.agsdi-icon-set-sample {
		display: block;
		width: 100%;
		position: absolute;
		font-size: 2em;
		text-align: center;
        margin-top: 15px;
		
		span {
			margin: 0 0.15em;
			
			&:after {
				display: none;
			}
		}
	}
}