.c-linkSlot {
  display: block;
  padding: 4px 8px;
  overflow: hidden;
  border: #fff 1px solid;
}

.c-linkSlot span {
  display: block;
  position: relative;
  color: #fff;
  text-align: center;
  transition: 0.3s;
}

.c-linkSlot span::after {
  content: attr(data-text);
  color: transparent;
  white-space: nowrap;
  position: absolute;
  place-self: center;
  inset-inline: 0;
  bottom: -100%;
  transition: 0.3s;
  z-index: 100;
}

.c-linkSlot:hover span {
  color: transparent;
  transform: translateY(-100%);
}

.c-linkSlot:hover span::after {
  color: #fff;
}

.c {
  &-linkSlot {
    display: block;
    padding: 4px 8px;
    overflow: hidden;
    border: #fff 1px solid;

    span {
      display: block;
      position: relative;
      color: #fff;
      text-align: center;
      transition: 0.3s;
      &::after {
        content: attr(data-text);
        color: transparent;
        white-space: nowrap;
        place-self: center;
        inset-inline: 0;
        bottom: -100%;
        transition: 0.3s;
        z-index: 100;
      }
    }

    &:hover {
      span {
        color: transparent;
        transform: translateY(-100%);

        &::after {
          color: #fff;
        }
      }
    }
  }
}