/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

#pocket-cta-container {
  box-shadow: 0 2px 8px var(--toolbar-box-shadow);
  margin: calc(var(--body-padding) * -1);
  margin-top: 20px;
  padding: 32px 0;
  position: relative;
}

.pocket-cta-container-cta-only #pocket-cta-only,
.pocket-cta-container-cta-and-recs #pocket-cta-and-recs {
  display: block;
}

.pocket-cta {
  padding-inline-start: 90px;
  background: url("chrome://global/skin/reader/RM-Pocket-Glyph.svg") no-repeat 16px 4px;
  line-height: 1.5;
}

body.dark .pocket-cta {
  background-image: url("chrome://global/skin/reader/RM-Pocket-Glyph-Dark.svg");
}

body.sepia .pocket-cta {
  background-image: url("chrome://global/skin/reader/RM-Pocket-Glyph-Sepia.svg");
}

.pocket-cta-inner {
  width: 936px;
  margin: auto;
  display: none;
}

.pocket-cta-header {
  font-weight: 900;
  font-size: 20px;
  line-height: 1.2;
}

.pocket-cta-subhead {
  margin: 4px 0 24px;
  line-height: 1.5;
}

.pocket-btn {
  background: #008078;
  border-radius: 4px;
  border: 0;
  color: #FBFBFE;
  font-size: 16px;
  padding: 12px 24px;
  text-decoration: none;
  text-align: center;
}

.pocket-btn:hover,
.pocket-btn:focus,
.pocket-btn:active {
  background: #004d48;
}

.pocket-dismiss-cta {
  cursor: pointer;
  display: inline-block;
  position: absolute;
  inset-inline-end: 80px;
  top: calc(50% - 9px);
  border: 0;
  width: 18px;
  height: 18px;
  background: no-repeat center/contain url("chrome://global/skin/icons/close.svg");
}

.pocket-btn-add {
  background: no-repeat left center url("chrome://global/skin/icons/pocket-outline.svg");
  fill: #5B5B66;
  background-size: 16px;
  border: 0;
  padding-inline-start: 20px;
  font-size: 16px;
  color: #5B5B66;
  cursor: pointer;
}

body.dark .pocket-btn-add {
  fill: #eee;
  color: #eee;
}

.pocket-btn-add:hover,
body.dark .pocket-btn-add:hover {
  fill: #EF4056;
}

.pocket-btn-add.saved,
body.dark .pocket-btn-add.saved {
  background-image: url("chrome://global/skin/icons/pocket.svg");
}

.pocket-collapse-recs {
  cursor: pointer;
  background: no-repeat center/contain url("chrome://global/skin/icons/arrow-down.svg");
  padding: 0;
  margin: 0;
  border: 0;
  width: 18px;
  height: 30px;
}

.pocket-collapse-recs.closed {
  transform: rotate(-90deg);
}

.pocket-recs-top {
  display: flex;
}

.pocket-recs-top .col:nth-child(2) {
  padding-inline-start: 8px;
}

.pocket-recs {
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
}

.pocket-recs.closed {
  display: none;
}

.pocket-recs p {
  text-align: start;
}

.pocket-rec {
  padding: 16px 0;
  width: 31%;
}

.pocket-rec-top {
  display: flex;
  text-decoration: none;
}

.pocket-sign-up-wrapper {
  text-align: center;
}

.pocket-rec .pocket-rec-title {
  font-style: normal;
  font-weight: bold;
  font-size: 16px;
  line-height: 24px;
  color: var(--main-foreground);
}

.pocket-rec .pocket-rec-thumb {
  width: 66px;
  height: 66px;
  filter: drop-shadow(0px 2px 6px rgba(58, 57, 68, 0.2));
  border-radius: 4px;
  margin-inline-start: 16px;
  visibility: hidden;
}

.pocket-rec .pocket-rec-thumb.pocket-rec-thumb-loaded {
  visibility: visible;
}

.pocket-rec .pocket-rec-meta {
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
  color: #5B5B66;
}

body.dark .pocket-rec .pocket-rec-meta {
  color: #eee;
}

.pocket-cta-container-logged-in #pocket-cta-only .pocket-sign-up,
.pocket-cta-container-logged-out #pocket-cta-only .pocket-discover-more {
  display: none;
}

/* Medium breakpoint */
@media (max-width: 1128px) {
  .pocket-cta-inner {
    width: 600px;
  }

  .pocket-dismiss-cta {
    inset-inline-end: 40px;
  }

  .pocket-rec {
    width: 48%;
  }

  .pocket-rec:nth-child(3) {
    display: none;
  }
}

/* Small breakpoint */
@media (max-width: 767px) {
  .pocket-cta-inner {
    width: 330px;
    text-align: center;
  }

  .pocket-cta-header,
  .pocket-cta-subhead,
  .pocket-rec-bottom,
  .pocket-rec-title {
    text-align: start;
  }

  .pocket-cta {
    padding: 66px 0 0;
    background: url("chrome://global/skin/reader/RM-Pocket-Glyph.svg") no-repeat center 0;
  }

  .pocket-dismiss-cta {
    inset-inline-end: 20px;
    top: 20px;
  }

  .pocket-recs {
    display: block;
  }

  .pocket-rec {
    width: 100%;
  }

  .pocket-rec:nth-child(2) {
    display: block;
  }
}