"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FocusModeButton = exports.ActionWrapper = exports.CollapsedActionsWrapper = exports.SecondaryVisibleWrapper = exports.MainActionsWrapper = exports.Wrapper = void 0;
const IconButton_1 = require("../../IconButton");
const styled_1 = require("../../styled");
const constants_1 = require("./constants");
exports.Wrapper = styled_1.styled.div `
  display: flex;
  grid-column: 3;
  grid-row: 1 / 4;
  gap: ${({ theme }) => theme.spacing(2)};

  ${({ theme }) => theme.breakpoints.down('laptop')} {
    grid-column: 4;
  }

  ${({ theme }) => theme.breakpoints.down('sm')} {
    display: none;
  }
`;
exports.MainActionsWrapper = styled_1.styled.div `
  display: flex;
  gap: ${({ theme, $spacing }) => theme.spacing($spacing)};

  ${({ theme }) => theme.breakpoints.down('laptop')} {
    &.${constants_1.actionsClassnames.withCollapseOnLaptop} {
      display: none;
    }
  }
`;
exports.SecondaryVisibleWrapper = (0, styled_1.styled)('div') `
  display: flex;
  flex-wrap: nowrap;
  gap: ${({ theme, $spacing }) => theme.spacing($spacing)};

  ${({ theme }) => theme.breakpoints.down('laptop')} {
    &.${constants_1.actionsClassnames.withCollapseOnLaptop} {
      display: none;
    }
  }

  ${({ theme }) => theme.breakpoints.down('sm')} {
    gap: ${({ theme }) => theme.spacing(2)};
  }
`;
exports.CollapsedActionsWrapper = styled_1.styled.div `
  display: none;

  margin-left: auto;

  ${({ theme }) => theme.breakpoints.down('laptop')} {
    &.${constants_1.actionsClassnames.withCollapseOnLaptop} {
      display: flex;
    }
  }

  ${({ theme }) => theme.breakpoints.down('sm')} {
    display: none;
  }
`;
exports.ActionWrapper = styled_1.styled.div `
  display: flex;
  flex-direction: row-reverse;
  gap: ${({ theme, $spacing }) => theme.spacing($spacing)};

  ${({ theme }) => theme.breakpoints.down('sm')} {
    gap: ${({ theme }) => theme.spacing(2)};
  }
`;
exports.FocusModeButton = (0, styled_1.styled)(IconButton_1.IconButton) `
  display: none;

  ${({ theme }) => theme.breakpoints.down('laptop')} {
    &.${constants_1.focusModeButtonClassnames.isShowOnLaptop} {
      display: inline-flex;
    }
  }
    
  ${({ theme }) => theme.breakpoints.up('laptop')} {
    &.${constants_1.focusModeButtonClassnames.isShowOnDesktop} {
      display: inline-flex;
    }
  }
`;
