:host {

  --icon-size: 20px;
  --hitbox-size: 3px 7px;
  --overlay-color: var(--black-solid-80);
  --underlay-icon-opacity: 0.6;

  font-size: var(--icon-size);
}

.toggle {
  cursor: pointer;
  position: relative;
  padding: var(--hitbox-size);

  /* Default State */
  .overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius);
    top: 0;
    left: 0;
    cursor: pointer;
    opacity: 0;
    box-sizing: border-box;
    padding: var(--hitbox-size);
    background-color: var(--overlay-color);
    box-shadow: var(--subtle-shadow);
    transition: background 0.2s ease;

    ui-icon {
      transition: all 0.2s ease;
      transform: translateX(100%) scale(0);
      opacity: 0.1;
    }
  }

  &.collapsed {
    .overlay ui-icon {
      transform: translateX(-100%) scale(0);
    }
  }

  .underlay {
    transition: var(--transition);
    opacity: var(--underlay-icon-opacity);
  }


  /* Hover State */
  &:hover {

    .overlay {
      opacity: 1;
      ui-icon {
        transform: translateX(0%) scale(1);
        opacity: 1;
      }
    }
    .underlay {
      opacity: 1;
    }
  }

}