@tile-animation-duration: 250ms;

.tile-animated-styles {
  &.bright {
    color: @black;

    svg {
      * {
        fill: @black !important;
      }
    }

    hr {
      background: @black;
    }

    .tile-animated {
      .overlay {
        background-color: @champagne-25;
      }
    }
  }

  &.dark {
    color: @white;

    svg {
      * {
        fill: @white !important;
      }
    }

    hr {
      background: @white;
    }

    .tile-animated {
      .overlay {
        background-color: @black;
      }
    }

  }
}

@{component--prefix}-tile-animated,
@{component--prefix}-tile-category {
  .tile-animated-styles;
  padding: 0 15px 15px 0;
}

.ecms-active {
  .tile-animated {
    .overlay {
      display: none;
    }
  }
}