/*
 * Styling for the flip-button.
 * Overriding colors should be as easy as overriding the
 * .phone-button--wrapper color vars in the style.css file.
 * Sizing should be equally easy but for now we need to override
 * the default values
 */

.phone-button--wrapper {
  display: inline-block;
  box-sizing: border-box;
  --aafb-color-base: rgba(224, 179, 93, 0.975);
  --aafb-color-hover: rgba(224, 179, 93, 0.875);
  --aafb-color-contrast: rgba(255, 255, 255, 0.975);
  /* fallback colors */
  --aafb-color-base-fb: gold;
  --aafb-color-hover-fb: gold;
  --aafb-color-contrast-fb: white;
}

.phone-button,
.phone-button--icon-wrapper,
.phone-button--content-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all .15s ease-in-out;
}

.phone-button {
  display: flex;
  padding: 8px;
  border-radius: 10px;
  border-width: 1px;
  border-style: solid;
  cursor: pointer;
  text-decoration: none;
  font-style: normal;
  
  /* color: var(--aafb-color-hover-fb); */
  border-color: var(--aafb-color-base);
  background-color: var(--aafb-color-base-fb);
  background-color: var(--aafb-color-base);
}
.phone-button:focus {
  text-decoration: none;
}
.phone-button .hidden {
  display: none;
}
.phone-button--icon-wrapper {
  flex: 0 0 24px;
  font-size: 1.5em;
  margin-right: 8px;
}
.phone-button--content-wrapper {
  flex: 1 1 66.6667%;
  justify-content: flex-start;
}

.phone-button--wrapper .phone-button p,
.phone-button--wrapper .phone-button i {
  margin: 0;
}

.phone-button i::before {
  font-family: 'FontAwesome';
  font-weight: 300;
  height: 20px;
  line-height: 20px;
  width: 20px;
}

.phone-button div i {
  top: 0;
}

.phone-button {
  border-color: var(--aafb-color-base);
}

.phone-button--wrapper .phone-button p,
.phone-button--wrapper .phone-button i {
  color: var(--aafb-color-contrast-fb);
  color: var(--aafb-color-contrast);
}
.phone-button--wrapper .phone-button:hover {
  color: var(--aafb-color-hover-fb);
  border-color: var(--aafb-color-hover);
  background-color: var(--aafb-color-hover-fb);
  background-color: var(--aafb-color-hover);
}
.phone-button--wrapper .phone-button:hover p,
.phone-button--wrapper .phone-button:hover i {
  color: var(--aafb-color-contrast-fb);
  color: var(--aafb-color-contrast);
}


/* extra css */

.box-contacts {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items; center;
}
.box-contacts .phone-button--wrapper {
  margin: 8px;
}

header .phone-button--wrapper {
  float: right;
  margin-top: 18px;
  margin-right: 20px;
}

.phone-button--wrapper .h24-logo {
  width: 22px;
  margin-right: 8px;
}