/*
* @Author: Sebastian Castro
* @Date:   2017-03-02 08:57:20
* @Last Modified by:   Sebastian Castro
* @Last Modified time: 2018-07-04 16:10:58
*/

.subcategorie-option-item
{
	position: relative;
	margin-bottom: 0;
	line-height: 2.8rem;
	padding: 0;
	padding-left: .8rem;
	height: 2.8rem;
	overflow: hidden;
	text-overflow: ellipsis;

	&:not(.expanded)
  {
  	.gogo-icon-name-wrapper  .option-name
		{
      &:hover .arrow-after { margin-bottom: -5px; }
      .arrow-after { margin-bottom: -4px; }
    }
  }

	.gogo-icon-name-wrapper
	{
    margin-right: 3rem;
    position: relative;
		&:not(.with-icon) { width: calc(100% - 1rem); }

    .option-name {
      position: absolute; width: 100%;
      &:hover
      {
        .arrow-after
        {
          border: solid 6px;
          margin-bottom: 1px;
        }
      }
    }
	}

  .elements-by-category-count {
    display:none;
    padding: 2px 8px;
    font-size: .8em;
    border-radius: 5px;
    position: absolute;
    height: 20px;
    line-height: 18px;
    right: 0;
    font-weight: bold;
    top: 12px;
    z-index: 5;
    opacity: .9;
		&.with-checkbox { right: 2rem; }
  }

	.icon-wrapper {
		float: left;
	}

  .arrow-after
	{
		display: inline-block;
    margin-left: 1rem;
    border: solid 5px;
   	margin-bottom: 1px;
    border-radius: 4px;
  }

	.icon { font-size: 1.3rem; width: 1.5rem; }
  .icon.fa, .icon.fas, .icon.fab, .icon.far { font-size: 1.2rem; }
	img.icon {
		height: 2.1rem;    
    padding-top: 6px;
	}

	.subcategorie-option-checkbox
	{
	  + label:before
	  {
	    width: 13px;
	    height: 13px;
	    left: 2px;
	    top: 3px;
	    z-index: 0;
	    border: 2px solid;
	    @include border-radius(50%);
	    margin-top: 2px;
	  }

		&:checked
		{
		  + label:before
		  {
		    top: 2px;
			  left: 1px;
		    width: 7px; height: 13px;
		    border-color: $grey-dark;
		    border-top: none;
		    border-left: none;
		    border-right: 2px solid;
		    border-bottom: 2px solid;
		    border-radius: 0;
		    @include transform(rotate(40deg));
		    -webkit-backface-visibility: hidden;
		    @include transform-origin(100% 100%);
		  }
		}
	}

	.checkbox-wrapper
	{
		width: 3rem;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;

		.checkbox-container
		{
	    position: absolute;
	    top: .6rem;
	    right: 0rem;
		}
	}

	&:hover
	{
		cursor: pointer;

    .checkbox-wrapper {
      background: none;
      background-color: transparent;
    }
	}
}