tutorbookapp/tutorbook

@use 'sass:map';
@use '@material/button/_index.scss' as button;

$height: 56px;
$padding: 24px;
$radius: 4px;

.link {
  display: inline-flex;
  text-decoration: none;
}

.button {
  height: $height !important;
  text-overflow: ellipsis;
  white-space: nowrap;
  @include button.horizontal-padding($padding);
  @include button.shape-radius($radius);
}

.googleButton {
  @include button.outline-color(var(--primary));
  @include button.outline-width(2px);
  padding-left: $height + $padding;
  overflow: hidden;
}

.googleLogo {
  background-color: #fff;
  position: absolute;
  height: $height - 4px;
  width: $height - 4px;
  border-top-left-radius: $radius;
  border-bottom-left-radius: $radius;
  top: 2px;
  left: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arrowButton :global(.mdc-button__label) {
  padding-right: 25px;
}

.arrowButton:hover .arrowIcon {
  transform: translateX(4px);
}

.arrowIcon {
  position: absolute;
  top: 50%;
  margin-top: -5px;
  margin-left: 8px;
  height: 10px;
  transition: transform 200ms ease-in-out;
}