"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

const styleh_components_1 = require("styleh-components");

const styleh_toolset_1 = require("@skava/styleh-toolset");

const Button_1 = require("@skava/ui/dist/components/atoms/Button");

const DetailedList_1 = require("@skava/ui/dist/components/molecules/DetailedList");

const Buttons_1 = require("../../Buttons");

const StyledDetailedList = styleh_components_1.styled(DetailedList_1.DetailedList)`display:flex;flex-direction:column;${DetailedList_1.DetailedListItemPanel}{margin:0;${styleh_toolset_1.media.phoneOrSmaller`flex-direction:row;`}}${DetailedList_1.DetailedListLabel},${DetailedList_1.DetailedListValue}{text-transform:capitalize;font:700 1.125rem "Roboto",Arial,Helvetica,sans-serif;color:var(--color-black);${styleh_toolset_1.media.tabletOrSmaller`font-size:0.875rem;`}}${DetailedList_1.DetailedListValue}{margin-left:0.25rem;${styleh_toolset_1.media.phoneOrSmaller`margin:0;`}}${DetailedList_1.DetailedListItemPanel}{&.status-value{${DetailedList_1.DetailedListValue}{color:var(--color-dark-green);font-weight:700;}}}`;
exports.StyledDetailedList = StyledDetailedList;
const StyledButtonWithIcon = styleh_components_1.styled(Buttons_1.ButtonWithIcon).attrs({
  'data-qa': 'qa-order-history-details'
})`background:none;width:auto;margin:0 0 0 1.875rem;padding:0;display:flex;justify-content:flex-end;height:auto;${styleh_toolset_1.media.phoneOrSmaller`width:3.75rem;`} ${Button_1.ButtonText}{text-transform:capitalize;color:var(--color-black);font:500 1.125rem "Roboto",Arial,Helvetica,sans-serif;margin:0;padding-right:0.5rem;${styleh_toolset_1.media.tabletOrSmaller`font-size:0.875rem;`}}${Button_1.ButtonIcon}{margin:0;svg{fill:var(--color-black);}}`;
exports.StyledButtonWithIcon = StyledButtonWithIcon;