@layer components{.btn{align-items:center;display:flex;flex-direction:row;justify-content:center;--button-border-color:var(--color-primary);--button-background-color:var(--color-primary);--button-color:var(--color-light);background-color:var(--button-background-color);border:2px solid var(--button-border-color);border-radius:var(--border-radius-sm);color:var(--button-color);cursor:pointer;display:inline-flex;gap:var(--spacing-sm);letter-spacing:1px;min-height:4.5rem;padding:var(--spacing-xxs) var(--spacing-sm);text-align:center;transition:border var(--transition-speed-rapid) ease-in-out,background-color var(--transition-speed-rapid) ease-in-out,color var(--transition-speed-rapid) ease-in-out,opacity var(--transition-speed-rapid) ease-in-out,transform var(--transition-speed-rapid)}.btn:disabled{cursor:default;opacity:.5}.btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.btn:active:not(:disabled){transform:scale(.95)}@media only screen and (min-width:768px){.btn:hover:not(:disabled){--button-border-color:var(--color-primary);--button-background-color:transparent;--button-color:var(--color-primary)}}.btn--SECONDARY{--button-border-color:var(--color-light-orange);--button-background-color:var(--color-light-orange);--button-color:var(--color-light)}@media only screen and (min-width:768px){.btn--SECONDARY:hover:not(:disabled){--button-border-color:var(--color-light-orange);--button-background-color:transparent;--button-color:var(--color-light-orange)}}.btn--GRAY-SECONDARY{--button-border-color:var(--color-location-type);--button-background-color:var(--color-location-type);--button-color:var(--color-light)}@media only screen and (min-width:768px){.btn--GRAY-SECONDARY:hover:not(:disabled){--button-border-color:var(--color-location-type);--button-background-color:transparent;--button-color:var(--color-location-type)}}.btn--LIGHT-GREEN{--button-border-color:var(--color-green-light);--button-background-color:var(--color-green-light);--button-color:var(--color-light)}@media only screen and (min-width:768px){.btn--LIGHT-GREEN:hover:not(:disabled){--button-border-color:var(--color-green-light);--button-background-color:transparent;--button-color:var(--color-green-light)}}.btn--WHITE-SECONDARY{--button-border-color:var(--color-light-orange);--button-background-color:var(--color-light-orange);--button-color:var(--color-light)}@media only screen and (min-width:768px){.btn--WHITE-SECONDARY:hover:not(:disabled){--button-border-color:var(--color-light);--button-background-color:var(--color-light);--button-color:var(--color-text)}}.btn--TEXT{--button-border-color:transparent;--button-background-color:transparent;--button-color:var(--color-secondary);min-height:auto;padding:0}@media only screen and (min-width:768px){.btn--TEXT:hover:not(:disabled){--button-border-color:transparent;--button-background-color:transparent;--button-color:var(--color-primary)}}.btn--DANGER{--button-border-color:var(--color-danger);--button-background-color:var(--color-light);--button-color:var(--color-danger)}@media only screen and (min-width:768px){.btn--DANGER:hover:not(:disabled){--button-border-color:var(--color-danger);--button-background-color:var(--color-danger);--button-color:var(--color-light)}}.btn--TRANSPARENT{--button-background-color:transparent;--button-color:var(--color-secondary)}@media only screen and (min-width:768px){.btn--TRANSPARENT:hover:not(:disabled){--button-background-color:var(--color-primary);--button-color:var(--color-light)}}.btn--TRANSPARENT-WHITE{--button-border-color:var(--color-light);--button-background-color:transparent;--button-color:var(--color-light)}.btn--TRANSPARENT-DANGER{--button-border-color:transparent;--button-background-color:transparent;--button-color:var(--color-danger)}@media only screen and (min-width:768px){.btn--TRANSPARENT-DANGER:hover:not(:disabled){--button-border-color:transparent;--button-background-color:var(--color-danger-transparent);--button-color:var(--color-danger)}}.btn--TRANSPARENT-PRIMARY{--button-border-color:transparent;--button-background-color:transparent;--button-color:var(--color-primary)}@media only screen and (min-width:768px){.btn--TRANSPARENT-PRIMARY:hover:not(:disabled){--button-border-color:transparent;--button-background-color:var(--color-primary-transparent);--button-color:var(--color-primary)}}.btn--FULL{display:flex;width:100%}.btn--SMALL{background-color:transparent;border:1px solid #878787;border-radius:15px;color:#878787;font-size:14px;font-weight:400;letter-spacing:1px;line-height:17px;margin:10px 0;min-height:25px;text-align:left;width:-moz-max-content;width:max-content}}
