tripod-hero-marquee-flex-styles.html

<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">

<dom-module id="tripod-hero-marquee-flex-content">
  <template>
    <style>
    :host {
      --tripod-hero-content-side-width: 50%;
      --tripod-hero-flex-layout-default: {
        @apply(--layout-vertical);
        top: 0;
        height: 100%;
      };
    }

    :host([desktop-layout]) .top-left {
      left: 0;
      @apply(--layout-start);
      @apply(--layout-start-justified)
    }

    :host([desktop-layout]) .top-center {
      left: 0;
      @apply(--layout-center);
      @apply(--layout-start-justified);
    }

    :host([desktop-layout]) .top-right {
      @apply(--layout-end);
      @apply(--layout-start-justified);
    }

    :host([desktop-layout]) .center-left {
      left: 0;
      @apply(--layout-start);
      @apply(--layout-center-justified);
      text-align: left;
      width: var(--tripod-hero-content-side-width);
      min-width: var(--tripod-hero-content-side-min-width, 384px);
    }

    :host([desktop-layout]) .center-left ::slotted(*) {
      text-align: left;
    }

    :host([desktop-layout]) .center-center {
      left: 0;
      @apply(--layout-center);
      @apply(--layout-center-justified);
    }

    :host([desktop-layout]) .center-right {
      @apply(--layout-end);
      @apply(--layout-center-justified);
      text-align: right;
      right: 0;
      width: var(--tripod-hero-content-side-width);
    }
     
    :host([desktop-layout]) .center-right ::slotted(*) {
      text-align: right;
    }

    :host([desktop-layout]) .bottom-left {
      left: 0;
      @apply(--layout-end);
      @apply(--layout-end-justified);
    }

    :host([desktop-layout]) .bottom-center {
      left: 0;
      @apply(--layout-center);
      @apply(--layout-end-justified);
    }

    :host([desktop-layout]) .bottom-right {
      @apply(--layout-end);
      @apply(--layout-end-justified);
    }
    
    </style>
  </template>
</dom-module>