.newsletter-cta { background-color: $lbry-gray-1; padding-top: 1rem; padding-bottom: 1rem; text-align: center; > div:first-of-type { margin-right: auto; margin-left: auto; @media (min-width: 551px) { width: 500px; } @media (max-width: 550px) { width: 90%; } } &::after { @include clearfix; } } .newsletter-cta__title { font-size: 0.8rem; letter-spacing: 0.05rem; margin-bottom: 0.75rem; text-transform: uppercase; } .newsletter-cta__input, .newsletter-cta__submit { @extend .__button-padding-horizontal; border-style: solid; border-width: 1px; @media (max-width: 550px) { width: 100%; } } .newsletter-cta__input { height: 38px; background-color: $lbry-white; font-size: 1rem; transition: border 0.2s; @media (min-width: 551px) { width: calc(100% - 112px); float: left; } @media (max-width: 550px) { text-align: center; } &:not(:focus) { border-top-color: $lbry-black; border-left-color: $lbry-black; @media (min-width: 551px) { border-right-color: transparent; border-bottom-color: $lbry-black; } @media (max-width: 550px) { border-right-color: $lbry-black; border-bottom-color: transparent; } } &:focus { border-top-color: $lbry-teal-5; border-left-color: $lbry-teal-5; @media (min-width: 551px) { border-right-color: transparent; border-bottom-color: $lbry-teal-5; } @media (max-width: 550px) { border-right-color: $lbry-teal-5; border-bottom-color: transparent; } } } .newsletter-cta__submit { @extend .__button-basic; @extend .__button-padding-vertical; color: $lbry-white; @media (min-width: 551px) { width: 112px; height: 38px; left: -1px; float: right; } @media (max-width: 550px) { top: -1px; display: block; } &:not(:hover) { background-color: $lbry-black; border-color: $lbry-black; } &:hover { background-color: $lbry-teal-3; border-color: $lbry-teal-5; } } .newsletter-cta__message { @include clearfix; color: $lbry-white; cursor: default; display: inline-block; font-size: 0.8rem; text-align: center; &:not(:empty) { margin: 0.5rem auto 0; padding: 0.25rem 1rem; } &:not(.error) { background-color: $lbry-teal-3; } &.error { background-color: $lbry-red-3; } }