/* ~~~~~~~~~~~~~~~~~~~~ SECONDARY BUTTON ~~~~~~~~~~~~~~~~~~~~ */

.secondary-button {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5em;
    background: transparent;
    padding: 0.875em 2em;
    border: 1px solid #E71324;
    border-radius: 50px;
    color: #E71324;
    text-transform: initial;
    font-size: 1.6rem;
    line-height: 1.125em;
    font-weight: 500;
}

.secondary-button:focus,
.secondary-button:hover {
    border-color: #A00D19;
    color: #A00D19;
    text-decoration: none;
}

.secondary-button:disabled {
    border-color: #bbc0c8;
    color: #bbc0c8;
    box-shadow: none;
}

.secondary-button:not(:disabled),
.secondary-button:not(:disabled) .icon-wrapper > * {
    transition: all ease-out 300ms;
}

.secondary-button .icon-wrapper {
    position: relative;
    width: 1.5em;
    height: 0;
}

.secondary-button .icon-wrapper > * {
    position: absolute;
    left: 0;
    top: -0.75em;
    width: 100%;
}

.secondary-button .hovered,
.secondary-button .disabled,
.secondary-button:focus .default,
.secondary-button:hover .default,
.secondary-button:disabled .default,
.secondary-button:disabled .hovered,
.secondary-button:not(:disabled):focus .disabled,
.secondary-button:not(:disabled):hover .disabled {
    visibility: hidden;
    opacity: 0;
}

.secondary-button .default,
.secondary-button:focus .hovered,
.secondary-button:hover .hovered,
.secondary-button:disabled .disabled {
    visibility: visible;
    opacity: 1;
}


/* ~~~~~~~~~~~~~~~~~~~~ ICON BUTTON ~~~~~~~~~~~~~~~~~~~~ */

.icon-button {
    position: relative;
    background: transparent;
    border: none;
    border-radius: 50px;
    width: 2.75em;
    min-width: 2.75em;
    height: 2.75em;
    padding: 0.625em;
    font-size: 1.6rem;
}

.icon-button:disabled,
.icon-button.disabled-link {
    pointer-events: none;
}

.icon-button:not(:disabled):not(.disabled-link):hover,
.icon-button:not(:disabled):not(.disabled-link):focus {
    background-color: #E9ECEF;
    text-decoration: none;
}

.icon-button:not(:disabled):not(.disabled-link),
.icon-button:not(:disabled):not(.disabled-link) > * {
  transition: all ease-out 300ms;
}

.icon-button > * {
  position: absolute;
  width: 1.5em;
  top: 0.625em;
  left: 0.625em;
}

.icon-button:not(:disabled):not(.disabled-link) .enabled,
.icon-button:disabled .disabled,
.icon-button.disabled-link .disabled {
    visibility: visible;
}

.icon-button:not(:disabled):not(.disabled-link) .disabled,
.icon-button:disabled .enabled,
.icon-button.disabled-link .enabled {
visibility: hidden;
}

.icon-button.small-button {
    font-size: 1.2rem;
}