@use 'sass:map';
@use '@tutorbook/styles/config';

.link {
  display: inline-block;
  border-radius: 6px;
  padding: 12px 21px;
  text-decoration: none;
  text-align: center;
  transition: all 200ms;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  font-family: map.get(config.$fonts, 'sans');
  path {
    transition: all 200ms;
  }
}

.link[data-focus-visible-added] {
  position: relative;
}

.link[data-focus-visible-added]:after {
  content: '';
  display: block;
  position: absolute;
  top: -6px;
  right: -6px;
  bottom: -6px;
  left: -6px;
  border: 3px solid black;
  border-radius: 10px;
}

.link:focus {
  outline: 0;
}

.small {
  padding: 6px 24px;
}

.wide {
  width: 100%;
}

.transparent {
  background-color: transparent;
  border: 0;
  color: #181818;
}

.blackFill {
  background-color: #181818;
  border: 2px solid #181818;
  color: #ffffff;
  path {
    color: #ffffff;
  }
}

.blackFill:hover {
  background-color: #ffffff;
  border: 2px solid #181818;
  color: #181818;
  path {
    color: #181818;
  }
}

.tealFill {
  background-color: #6afdef;
  border: 2px solid #6afdef;
  color: #181818;
  path {
    color: #181818;
  }
}

.tealFill:hover {
  border: 2px solid #a1fff6;
  background-color: #a1fff6;
}

.blackOutline {
  background-color: transparent;
  border: 2px solid #181818;
  color: #181818;
  path {
    color: #181818;
  }
}

.blackOutline:hover {
  background-color: #181818;
  border: 2px solid #181818;
  color: #ffffff;
  path {
    color: #ffffff;
  }
}

.whiteOutline {
  background-color: transparent;
  border: 2px solid #ffffff;
  color: #ffffff;
  path {
    color: #ffffff;
  }
}

.whiteOutline:hover {
  background-color: transparent;
  border: 2px solid #181818;
  color: #181818;
  path {
    color: #181818;
  }
}

.white {
  color: #ffffff;
  padding: 0;
  path {
    color: #ffffff;
  }
}

.white:hover .arrow {
  transform: translateX(4px);
}

.black {
  color: #181818;
  padding: 0;
  path {
    color: #181818;
  }
}

.black:hover .arrow {
  transform: translateX(4px);
}

.blackFillTransparent {
  background-color: #181818;
  border: 2px solid #181818;
  color: #ffffff;
  path {
    color: #ffffff;
  }
}

.blackFillTransparent:hover {
  background-color: transparent;
  border: 2px solid #181818;
  color: #181818;
  path {
    color: #181818;
  }
}

.blackFillTransparent:hover .arrow,
.blackFillTransparent:focus .arrow {
  fill: #181818;
}

.arrow {
  margin-left: 8px;
  transition: transform 200ms;
  height: 10px;
}