@charset "utf-8";

section>div.sContainerContainer>div.sContainer:has(button.youtubeRemoveBtn){
  position: relative;
}

button.youtubeRemoveBtn{
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;

  width: 4rem;
  height: 4rem;

  margin: auto 0;
  padding: 0;

  border: none;
  border-radius: 0 1rem 1rem 0;

  background-color: var(--base3);
  
  box-shadow: var(--shadowRaised);

  cursor: pointer;

  transition: all .3s;
}

div.sContainer:hover>button.youtubeRemoveBtn, button.youtubeRemoveBtn:focus{
  right: -4rem;
}

button.youtubeRemoveBtn>i{
  display: block;

  width: fit-content;
  height: auto;

  margin: 0;
  padding: 0;

  color: var(--text2);
  font-size: 2rem;

  line-height: 4rem;
  text-decoration: none;
  text-align: center;
  letter-spacing: 0;
}