@import "vars";
@import "mixins";

.number,
.letter {
  height: 60px;
  width: 60px;
  display: inline-block;

  font-family: $main-font;
  font-size: 30px; 
  font-size: 25px; 
  line-height: 60px;
  text-align: center;
  font-style: normal;
  font-weight: bold;
  letter-spacing: -0.04em;

  vertical-align: middle;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  @include transition(all 0s 0s ease-in-out);
  white-space: nowrap;
  span {font-weight: normal; opacity: 0.5;}
  &.number-md {
    font-size: 16px; 
    height: 44px;
    width: 44px;
    line-height: 43px;
  }
}

.btn-md .letter {
  font-size: 16px; 
  height: 44px;
  width: 44px;
  line-height: 43px;
}


.icon {
  position: relative;
  @include icon;
}


.icon-soft {
  opacity: 0.5;
}

.icon-xxs {
  @include icon-xxs;
}

.icon-xs {
  @include icon-xs;
}

.icon-sm {
  @include icon-sm;
}

.icon-md {
  @include icon-md;
}

.icon-xl {
  @include icon-xl;
}

.icon-xxl {
  @include icon-xxl;
}

.rot45 > .icon {
  transform: rotateZ(45deg);
  transition: all 0.1s 0s ease-in-out !important;
}

.rot45 > .icon::before {
  transition: all 0.1s 0s ease-in-out !important;
}

.rot45:hover > .icon {
  transform: rotateZ(45deg) translateX(-8px);
}

.icon-svg {
    background-size: 26px;
    background-position: center;
    background-repeat: no-repeat;
}

.icon-sd6 {
    background-image: url(/images/sd6-icon-white.svg);
}