@import '@od/global-resources/scss/settings/variables/_colors.scss';

#compare-template {
  .compare-page {
    font-size: 1rem;

    &-top-nav {
      display: flex;
      margin-bottom: .5rem;
      align-items: center;
      color: $blue;
    }

    &-continue {
      &-container {
        flex-grow: 1;
      }

      &-button {
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        font-size: inherit;
      }
    }

    &-actions {
      &-button {
        display: inline-block;
        &:not(:first-child) {
          margin-left: 16px;
        }

        &-print svg {
          height: 2rem;
          width: 2rem;
        }

        svg {
          vertical-align: middle;
        }

        button {
          margin: 0;
          padding: 0;
          border: 0;
          background: transparent;
          font-size: inherit;
        }
      }
    }

    @media screen and (max-width: 640px) {
      &-top-nav {
        flex-direction: column;
      }

      &-container {
        width: 100%;
        display: flex;
        align-items: flex-start;

        &:not(:first-child) {
          margin-top: 1rem;
        }
      }

      &-actions {
        &-container {
          display: flex;
        }
      }
    }
  }

  .od-share-component {
    position: relative;
    z-index: 10;
  }

  .od-modal {
    font-size: 1rem;
    h1 {
      width: 100%;
    }
  }
}